Javascript - Append HTML to container element without innerHTML
JavascriptHtmlInnerhtmlJavascript Problem Overview
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 because when it is use like this:
element.innerHTML += htmldata
It works by replacing all of the html first before adding the old html plus the new html. This is not good because it resets dynamic media such as embedded flash videos...
I could do it this way which works:
var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);
However the problem with that way is that there is that extra span tag in the document now which I do not want.
How can this be done then? Thanks!
Javascript Solutions
Solution 1 - Javascript
I am surprised that none of the answers mentioned the insertAdjacentHTML()
method. Check it out here. The first parameter is where you want the string appended and takes ("beforebegin", "afterbegin", "beforeend", "afterend"). In the OP's situation you would use "beforeend". The second parameter is just the html string.
Basic usage:
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
Solution 2 - Javascript
To give an alternative (as using DocumentFragment
does not seem to work): 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);
}
Solution 3 - Javascript
alnafie has a great answer for this question. I wanted to give an example of his 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>
Hopefully this is helpful to others.
Solution 4 - Javascript
This is what DocumentFragment
was meant for.
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);
Solution 5 - Javascript
<div id="Result">
</div>
<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
document.getElementById('Result').innerHTML += data;
}
</script>
assign the data for div with "+=" symbol you can append data including previous html data
Solution 6 - Javascript
How to fish and while using strict code. There are two prerequisite functions needed at the bottom of this post.
xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');
xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');
xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');
Add multiple elements (namespace only needs to be on the parent element):
xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');
Dynamic reusable code:
function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}
function xml_add(pos, e, xml)
{
e = (typeof e == 'string' && id_(e)) ? id_(e) : e;
if (e.nodeName)
{
if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
//Add fragment and have it returned.
}
}