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

Why not use Jquery? Check my detailed answer below. stackoverflow.com/a/50482776/5320562 — Loukan ElKadi
– Loukan ElKadi, Commented Aug 6, 2018 at 6:25

isherwood · Accepted Answer · 2022-10-27 20:45:48Z

802

Check out the insertAdjacentHTML() method. 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>');

edited Oct 27, 2022 at 20:45

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Mar 24, 2012 at 11:51

alnafie

10.8k8 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Corwin01 Over a year ago

Just tried your solution as well as the accepted. Both works, but yours is only 2 lines and no loops. Sounds like a winner to me.

Corwin01 Over a year ago

For reference to anyone who might choose this route: This method doesn't play nice with tables in IE9.

J86 Over a year ago

In Chrome it tells me Uncaught TypeError: undefined is not a function !

Seth Over a year ago

This hidden gem needs more exposure.

lasec0203 Over a year ago

pretty annoying that this method doesn't autocomplete in the Chrome web-console. v79

|

Felix Kling · Accepted Answer · 2011-06-10 10:30:43Z

113

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

edited Jun 10, 2011 at 10:30

answered Jun 10, 2011 at 10:10

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

4 Comments

kennydelacruz Over a year ago

I thought we're looking for a solution that does not use "innerHTML"

Felix Kling Over a year ago

@kennydelacruz: The OP didn't want to append new HTML to an existing HTML because it destroys and recreates the existing elements. The OP found a solution by creating a new element and append that but they didn't want to add an additional element. I just extended that solution to show that they can move/append the newly created elements, which don't impact the existing elements.

Toastgeraet Over a year ago

I know this is old, but can anyone explain to me why one can iterate over e.firstChild?

Felix Kling Over a year ago

@Toastgeraet: This is example is not iterating over e.firstChild. Rather, it checks whether e has a child and if yes, move that child over to the element.

Trevor Nestman · Accepted Answer · 2017-02-02 19:52:05Z

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.

I hate to be a stickler for the rules but I think it would have been better if you created a demo (jsfiddle, codepen, etc) and then added that to Alnafie's answer by using the edit feature or submitting a comment. Creating an answer only to demonstrate another user's answer is not how SO works, regardless of how useful the information you provided is. Imagine if every user decided to demonstrate another answer by creating an answer - it would get messy.

Raynos · Accepted Answer · 2011-06-10 11:43:58Z

5

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

document.createDocumentFragment, .childNodes

edited Jun 10, 2011 at 11:43

answered Jun 10, 2011 at 9:32

Raynos

170k57 gold badges359 silver badges399 bronze badges

8 Comments

Bob Over a year ago

I just tested this and it does not work. Is that how it should be used?

Ash Burlaczenko Over a year ago

Where are you getting (a) from? Is that a typo.

Bob Over a year ago

Yes that is a typo, it should be e. I do not think you can use innerHTML for a fragment. This is not working

Raynos Over a year ago

@Bob I've gone for the cop-out use jQuery.

Bob Over a year ago

jQuery no no! I am not going to include jQuery just for one small function :\ It is just overkill

|

vijay · Accepted Answer · 2015-06-09 08:06:10Z

3

<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

answered Jun 9, 2015 at 8:06

vijay

3313 silver badges9 bronze badges

1 Comment

musicnothing Over a year ago

The question specifically requires not using element.innerHTML += data.

John · Accepted Answer · 2020-01-03 15:00:34Z

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

Collectives™ on Stack Overflow

Append HTML to container element without innerHTML

6 Answers 6

12 Comments

4 Comments

1 Comment

8 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

12 Comments

4 Comments

1 Comment

8 Comments

1 Comment

Comments

Linked

Related