Append HTML element to the DOM instead of a string of HTML text

Question

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, Dec 12 '18 at 16:49
Related: [Appending HTML string to the DOM](/q/7327056/4642212). — Sebastian Simon, May 29 '21 at 06:47

score 6 · Accepted Answer · edited Dec 12 '18 at 15:41

ParentNode.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>

score 4 · Answer 2 · answered Dec 12 '18 at 15:36

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);

score 0 · Answer 3 · answered Dec 12 '18 at 15:36

0

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.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/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.

answered Dec 12 '18 at 15:36

DanteTheSmith

2,937
1
16
31

I totally understand that. My issue is 'left-menu' is not within the controller or template I write this assignment on. It's totally higher up the hierarchy, that's why I'm trying this workaround instead. – LazioTibijczyk Dec 12 '18 at 15:42
Then you either wrap angular control higher in the hierarchy, so it includes the part in question or this is not AngularJS question at all and the tag is not needed. Do the regular vanilla dom combination with targeting the parent node of DOM with a selector of your choosing and using append() method to inject HTML into it. – DanteTheSmith Dec 12 '18 at 15:44
Not sure how I'd refer to grand-grand-parent's variables and set them to use this approach. – LazioTibijczyk Dec 12 '18 at 15:48
If they are not in AngularJS application scope (wrapped with ng-app) you should not use this approach. Whether they should be I can not answer, that is an architecture question you have to answer for yourself or ask someone who is in charge of making those decisions. If it remains outside of AngularJS app scope but you still wanna change them from within the controller, just use vanilla, get DOM element and append to it. Careful when you expand AngularJS scope on part of the app that is not designed to work as part of AngularJS app (not written in "angular way") bcs of reasons mentioned. – DanteTheSmith Dec 12 '18 at 16:09
This function is assigned to a 'Preview' button I have on my modal. I'm not sure how to access my left-menu controller from the modal. Was thinking of $broadcast or $emit if any of those would work. I'm wondering what would be a good approach in this situation. left-menu controller has nothing to do with the modal apart from the fact they are ui-views of the same main view. – LazioTibijczyk Dec 13 '18 at 08:57

score -1 · Answer 4 · answered Dec 12 '18 at 15:33

-1

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.

answered Dec 12 '18 at 15:33

Travis Weston

903
6
24

score -1 · Answer 5 · answered Dec 12 '18 at 15:43

-1

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);

answered Dec 12 '18 at 15:43

Kubwimana Adrien

2,463
2
8
11

Append HTML element to the DOM instead of a string of HTML text

5 Answers5

Linked

Related