CODEWITHSUNDEEP
javascript
Meek
Meek

Reputation: 3362

Appending html using native javaScript

I need to append some html to an existing element using pure javaScript:

function create(htmlStr) {
  var frag = document.createDocumentFragment(),
    temp = document.createElement('div');
  temp.innerHTML = htmlStr;
  while (temp.firstChild) {
    frag.appendChild(temp.firstChild);
  }
  return frag;
}

var target = document.querySelectorAll(".container-right");
var fragment = create(
  '<div class="freetext"><p>Some text that should be appended...</p></div>'
);
document.body.insertBefore(fragment, document.body.childNodes[0]);

It's kind of working, but I have two questions:

  1. How can I make sure that the html fragment is appended to the div with the class container-right and not just the body? Changing the last line to document.body.insertBefore(fragment, target); doesn't work.

  2. How can I insert the html after the content in the target element - after the existing content - like jQuery's append()?

Any help is much appreciated.

JsFiddle here.

Upvotes: 20

Views: 67368

Answers (6)

Florian
Florian

Reputation: 11

You should always use the version from @Giorgio Tempesta

var target = document.querySelector(".container-right");
var newContent = '<div class="freetext"><p>Some text that should be appended...</p></div>';
target.insertAdjacentHTML('beforeend', newContent);

By using the elm.innerHTML += ... method, you will always lose all eventlisteners, that may be initialized before.

For example: If your div looks like this:

<div class="menu">
    <input id="test type="checkbox" name="test"/>
</div>`

And there is a Eventlistener like document.querySelector('#test').addEventListener('click', ...) you will delete this EventListener if you use innerHTML on the outer div element.

var target = document.querySelector(".menu");
target.innerHTML += ...

Upvotes: 1

babak-maziar
babak-maziar

Reputation: 23

document.querySelectorAll('.container-right').forEach(elm=>{
    elm.innerHTML += '<div class="freetext"><p>Some text that should be appended...</p></div>';
});

Upvotes: 0

Giorgio Tempesta
Giorgio Tempesta

Reputation: 2059

Based on this answer to a similar question, I have found that insertAdjacentHTML is a good fit for this kind of problems. I haven't tested it on a Node List, but with a single node it works perfectly.

insertAdjacentHTML has a great browser compatibility (back to IE4), plus it lets you decide where you want to insert the HTML (see here).

var target = document.querySelector(".container-right");
var newContent = '<div class="freetext"><p>Some text that should be appended...</p></div>';
target.insertAdjacentHTML('beforeend', newContent);

Upvotes: 7

Paulo Pereira
Paulo Pereira

Reputation: 1115

var target = document.querySelector(".container-right");

var p = document.createElement('p');
p.innerHTML = "Some text that should be appended...";

var div = document.createElement('div');
div.appendChild(p);

var fragment = document.createDocumentFragment();
fragment.appendChild(div);

target.appendChild(fragment);

JSFiddle

Upvotes: 31

Justin Taddei
Justin Taddei

Reputation: 2276

Try this:

var target = document.querySelector(".container-right");
target.innerHTML += '<div class="freetext"><p>Some text that should be appended...</p></div>';

Upvotes: 9

Tim Consolazio
Tim Consolazio

Reputation: 4888

Well, I know this works:

let elem = document.querySelector ( 'css-selector (id or class)' )

That should give you your element. Then you do this:

elem.innerHTML = elem.innerHTML + myNewStuff;

That'll append your html to the innerHTML of the element. I tried it quickly, it works.

Upvotes: 35

Related Questions