AngularJS Jqlite after not adding element
Consider this example: why doesn't el4 fit after el3? If I debug and type el3 it seems that el4 is gone. How can I place an element behind another element so that they become siblings?
EDIT: I don't want to add el3 before calling .after (). I just have two angular. Elements and I want to combine them into two siblings and also add or replace them in a 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>
+3
source to share
1 answer
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>
0
source to share