Javascript - adding HTML to a container element without innerHTML

Question

I need a way to add HTML to a container element without using innerHTML. The reason I don't want to use innerHTML is because when it is used as follows:

element.innerHTML += htmldata

It works by replacing all html with the first before adding the old html and new html. This is not good because it resets dynamic media such as built-in flash movies ...

I could do it in a way that works:

 var e = document.createElement('span'); e.innerHTML = htmldata; element.appendChild(e); 

However, the problem is that this document has that extra span tag that I don't need.

How can I do that? Thank!

Answer 1

To give an alternative (since using DocumentFragment does not seem to work): you can mimic it, iterate over the children of the newly created node and just add them.

 var e = document.createElement('div'); e.innerHTML = htmldata; while(e.firstChild) { element.appendChild(e.firstChild); } 

Answer 2

I am surprised that none of the answers mentioned the insertAdjacentHTML() method. Check here . The first parameter is where you want the line to be added and accepted ("beforebegin", "afterbegin", "preend", "afterend"). In an OP situation, you must use "preend". The second parameter is just the html string.

Main use:

 var d1 = document.getElementById('one'); d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>'); 

Answer 3

alnafie has an excellent answer to this question. I wanted to give an example of my code for reference:

 var childNumber = 3; function addChild() { var parent = document.getElementById('i-want-more-children'); var newChild = '<p>Child ' + childNumber + '</p>'; parent.insertAdjacentHTML('beforeend', newChild); childNumber++; } 

 body { text-align: center; } button { background: rgba(7, 99, 53, .1); border: 3px solid rgba(7, 99, 53, 1); border-radius: 5px; color: rgba(7, 99, 53, 1); cursor: pointer; line-height: 40px; font-size: 30px; outline: none; padding: 0 20px; transition: all .3s; } button:hover { background: rgba(7, 99, 53, 1); color: rgba(255,255,255,1); } p { font-size: 20px; font-weight: bold; } 

 <button type="button" onclick="addChild()">Append Child</button> <div id="i-want-more-children"> <p>Child 1</p> <p>Child 2</p> </div> 

Hope this helps others.

Answer 4

 <div id="Result"> </div> <script> for(var i=0; i<=10; i++){ var data = "<b>vijay</b>"; document.getElementById('Result').innerHTML += data; } </script> 

assign data to div with "+ =" symbol, you can add data, including previous html data

Answer 5

This is what DocumentFragment meant.

 var frag = document.createDocumentFragment(); var span = document.createElement("span"); span.innerHTML = htmldata; for (var i = 0, ii = span.childNodes.length; i < ii; i++) { frag.appendChild(span.childNodes[i]); } element.appendChild(frag); 

document.createDocumentFragment , .childNodes

Answer 6

element.innerHTML *+=* htmldata - nope

try - element.innerHTML **=+** htmldata , if you do not want to replace anything - just add new data.