3

Consider this runnable example: Why is el4 not put after el3? If I debug and print el3 it seems that el4 has disappeared. How can I put an element after another element, so that they become siblings?

EDIT: I don't want to append el3, before calling .after(). I simply have two angular.elements an I want combine them into two siblings, and the append or replace them in the directive element.

angular.module('myModule', []) 


.directive('mydir', [function () {
    return {
        restrict: 'E',
        scope: {},
        template:'<div><b>{{myf.str}}</b>',
        link: function (scope, elem, attrs, ctrl) {
          
          
            var el = angular.element('<b>First </b>');
            var el2 = angular.element('<i>Second</i><br>');
            el.append(el2);
            elem.append(el);
          
          
            var el3 = angular.element('<b>Third </b>');
            var el4 = angular.element('<i>Fourth</i>');
            el3.after(el4);
            elem.append(el3);
          
            
        }
    };
}])
<html ng-app='myModule'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<mydir></mydir>
user1506145
  • 5,176
  • 11
  • 46
  • 75
  • 2
    Well, the `el3` is not appended yet so `el3.after(el4);` won't work. If you switch their places, it will work - [plunker](http://plnkr.co/edit/DsydFWErgapAegfLJX2J?p=preview) – Vucko Jan 12 '15 at 13:36
  • Thanks Vucko, but I want to add the elements together as siblings before appending or replacing. – user1506145 Jan 12 '15 at 14:08
  • There are various ways to do that. What exactly do you want to achieve? – Vucko Jan 12 '15 at 14:24
  • Vucko, I have two angular.elements, I just want to add them together as a siblings object s. Then I just want to append the siblings object to the dom, element.append(s). – user1506145 Jan 14 '15 at 14:04

1 Answers1

0

angular.module('myModule', [])


.directive('mydir', [
  function() {
    return {
      restrict: 'E',
      scope: {},
      template: '<div><b>{{myf.str}}</b>',
      link: function(scope, elem, attrs, ctrl) {


        var el = angular.element('<b>First </b>');
        var el2 = angular.element('<i>Second</i><br>');
        el.append(el2);
        elem.append(el);


        var el3 = angular.element('<b>Third </b>');
        var el4 = angular.element('<i>Fourth</i>');

        elem.append(el3);
        elem.after(el4);


      }
    };
  }
])
<html ng-app='myModule'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<mydir></mydir>
sylwester
  • 16,498
  • 1
  • 25
  • 33
  • Thanks sylwester, but I want to add the two elements together as sibligs first, before appending them together. – user1506145 Jan 12 '15 at 14:09