Javascript - Append HTML to container element without innerHTML

Question

I need a way to append HTML to a container element without using innerHTML. The reason why I do not want to use innerHTML is that when it is used like this:
 

element.innerHTML += htmldata

It works by replacing all of the HTML first before adding the old HTML plus new HTML. This is not good because it resets dynamic media such as embedded flash videos.

I could do it this way:

var e = document.createElement('span');

e.innerHTML = htmldata;

element.appendChild(e);

However, the problem with that way is that there is an extra span tag in the document now that I do not want.

Can someone help me with this?

Answer 1

To give an alternative you can simulate it by iterating over the children of the newly generated node and only append those.

var e = document.createElement('div');

e.innerHTML = htmldata;

while(e.firstChild) {

    element.appendChild(e.firstChild);

}

Want to learn Full Stack Devlopment? Check out the Full Stack Developer course from Intellipaat.