javascript - 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>

Answer 1

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>