CreateTextNode in javascript appends html content

Question

I am trying to append html formatted block to a existing div using append child. But I see the html code is appending instead of formatted html. Any pointer on how to add html design instead of html code with appendChild and createTextNode?

Fiddle

<div id="currentElement">
  <div>
    <h2>
    Hello test
    </h2>
  </div>
</div>

Script

var ele = document.getElementById("currentElement");
var newHtml = "<div><h3>hello test continued</h3></div>";
ele.appendChild(document.createTextNode(newHtml));

yes, because a text node is text, not HTML. ele.innerHTML += newHTML or, a better alternative ele.insertAdjacentHTML('beforeend', newHtml) is what you want developer.mozilla.org/en-US/docs/Web/API/Element/… — Jaromanda X
– Jaromanda X, Commented Nov 22, 2017 at 1:04

Obsidian Age · Accepted Answer · 2017-11-22 01:12:15Z

2

Why not just use Element.innerHTML? You can use ele.innerHTML = newHtml to overwrite the content, or ele.innerHTML += newHtml to add to the existing content.

var ele = document.getElementById("currentElement");
var newHtml = "<div><h3>hello test continued</h3></div>";
ele.innerHTML += newHtml;

<div id="currentElement">
  <div>
    <h2>
      Hello test
    </h2>
  </div>
</div>

Note that this will remove any existing event handlers. In order to retain handlers, you should use Element.insertAdjacentHTML() instead:

var ele = document.getElementById("currentElement");
var newHtml = "<div><h3>hello test continued</h3></div>";
ele.insertAdjacentHTML('beforeend', newHtml);

<div id="currentElement">
  <div>
    <h2>
      Hello test
    </h2>
  </div>
</div>

Note that .insertAdjacentHTML() provides the ability to choose where the inserted text should go with one of the following as the (mandatory) first function parameter:

beforebegin: Before the element itself.
afterbegin: Just inside the element, before its first child.
beforeend: Just inside the element, after its last child.
afterend: After the element itself.

I've gone with beforeend in the above example.

Hope this helps! :)

edited Nov 22, 2017 at 1:12

answered Nov 22, 2017 at 1:05

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

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

4 Comments

Jaromanda X Over a year ago

that would REPLACE the current html :p (comment pre edit) (and if you want to ADD it, insertAdjacentHTML is more performant :p)

Obsidian Age Over a year ago

@JaromandaX -- Updated to cover both replacement and addition :)

Kurkula Over a year ago

this will remove existing event listeners. any option with appendChild?

Jaromanda X Over a year ago

insertAdjacentHTML

Emad Dehnavi · Accepted Answer · 2017-11-22 01:16:01Z

1

If you want do it by appendChild, do it this way :

var newHtml = "<div><h3>hello test continued</h3></div>";
var child = document.createElement('div');
child.innerHTML = newHtml;
child = child.firstChild;
document.getElementById('currentElement').appendChild(child);

https://jsfiddle.net/vdv6yqcL/10/

answered Nov 22, 2017 at 1:16

Emad Dehnavi

3,4795 gold badges24 silver badges47 bronze badges

Comments

Jaromanda X · Accepted Answer · 2017-11-22 01:10:41Z

If you want to preserve event listeners, you have two options

// sample event listener
document.querySelector('#currentElement h2').addEventListener('click', () => console.log('click works'));
// code starts here
var ele = document.getElementById("currentElement");
var div = document.createElement('div'), 
    h3 = document.createElement('h3'),
    txt = document.createTextNode('hello test continued');
div.appendChild(h3);
h3.appendChild(txt);
ele.appendChild(div);

<div id="currentElement">
  <div>
    <h2>
    Hello test
    </h2>
  </div>
</div>

or

// sample event listener
document.querySelector('#currentElement h2').addEventListener('click', () => console.log('click works'));
// code starts here
var ele = document.getElementById("currentElement");
var newHtml = "<div><h3>hello test continued</h3></div>";
ele.insertAdjacentHTML('beforeend', newHtml);

<div id="currentElement">
  <div>
    <h2>
    Hello test
    </h2>
  </div>
</div>

Collectives™ on Stack Overflow

CreateTextNode in javascript appends html content

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related