How can I add an element to a section rather than pure string?
I am trying to use append but that doesn’t parse my HTML.
Maybe there’s more AngularJS way of doing this I’m not aware of.
document.getElementsByClassName("left-menu")[0].append(
'<div class="adverts-container top30">' +
'<div class="advert-carousel">' +
'Message' +
'</div>' +
'</div>'
);
<section class="left-menu"></section>How can I add an element to a section rather than pure string?
I am trying to use append but that doesn’t parse my HTML.
Maybe there’s more AngularJS way of doing this I’m not aware of.
document.getElementsByClassName("left-menu")[0].append(
'<div class="adverts-container top30">' +
'<div class="advert-carousel">' +
'Message' +
'</div>' +
'</div>'
);
<section class="left-menu"></section>- Approach doesn't make any sense in angular app. What higher level problem are you trying to solve that a typical angular template won't work? – charlietfl Commented Dec 12, 2018 at 16:49
- Related: Appending HTML string to the DOM. – Sebastian Simon Commented May 29, 2021 at 6:47
5 Answers
Reset to default 7ParentNode.append() method inserts a set of Node objects or DOMString not the htmlString.
I do not know the angular way but you can use insertAdjacentHTML() to insert htmlString in pure JavaScript.
document.getElementsByClassName("left-menu")[0].insertAdjacentHTML( 'beforeend',
'<div class="adverts-container top30">' +
'<div class="advert-carousel">' +
'Message' +
'</div>' +
'</div>'
);
<section class="left-menu"></section>You should add HTML string in another element and append it to the left-menu element:
var tmp=document.createElement('div');
tmp.innerHTML='<div class="adverts-container top30">' +'<div class="advert-carousel">' +'Message' +'</div>' +'</div>';
document.getElementsByClassName("left-menu")[0].appendChild(tmp.firstChild);
There surely is. Generally, you DON'T wanna use jQ in AngularJS ever, and vanilla only for things not provided by AngularJS. Here you are doing the binding to view. That surely is something AngularJs offers, being the MVsomething framework.
Reason? In nonspecific and simple terms, AngularJS has its own ways which ensure neat things like data binding etc if you don't obey by its rules you will most likely break the neat things you get.
Here is a demo of how to do this in modern AngularJS:
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
It is quite simple. You define HTML as a string, bind that to the scope like any other data you want accessible in the view and then simply use the ng-bind-html directive to inject HTML into element where you are using the directive.
Neat, simple, safe and result will work as any other template statically written, you can band data from and to it with no additional hassle, the digest cycle will also work as usual.
I'm no expert on this one, but I don't believe append will parse HTML code. If you use document.createElement first to generate the element, you can then use append to add that created element to the DOM.
Try this:
var el = document.createElement("div");
el.className = "adverts-container top30";
el.innerHTML = '<div class="advert-carousel">' +
'Message' +
'</div>';
document.querySelectorAll(".left-menu")[0].append(el);