Paste HTML into a div

Question

I am trying to insert a piece of HTML into a div. I want a simple JavaScript way to be faster than using jQuery. Unfortunately, I forgot how to do this in the "old" way .: P

var test2 = function(){ var cb = function(html){ var t1 = document.getElementById("test2"); var d = document.createElement("div"); d.id ="oiio"; d.innerHtml = html; t1.appendChild(d); console.timeEnd("load data with javascript"); }; console.time("load data with javascript"); $.get("test1.html", cb); } 

what am i doing wrong here guys?

edit :
Someone asked which is faster, jquery or plain js, so I wrote a test:
http://jsperf.com/html-insertion-js-vs-jquery

plain js 10% faster

Answer 1

I think this is what you want:

 document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>'; 

Keep in mind that innerHTML is not available for all tag types when using IE. (e.g. table items)

Answer 2

Using jQuery will take care of browser inconsistency. If the jquery library is included in your project, simply write:

 $('#yourDivName').html('yourtHTML'); 

You may also consider using:

 $('#yourDivName').append('yourtHTML'); 

This will add your gallery as the last element in the selected div. Or:

 $('#yourDivName').prepend('yourtHTML'); 

This will add it as the first element in the selected div.

See jQuery docs for these features:

• http://api.jquery.com/append/
• http://api.jquery.com/prepend/

Answer 3

I use "+" (plus) to insert a div in html:

document.getElementById('idParent').innerHTML += '<div id="idChild"> content html </div>';

I hope for this help.

Answer 4

And many lines can look like this. The html here is just a sample.

 var div = document.createElement("div"); div.innerHTML = '<div class="slideshow-container">\n' + '<div class="mySlides fade">\n' + '<div class="numbertext">1 / 3</div>\n' + '<img src="image1.jpg" style="width:100%">\n' + '<div class="text">Caption Text</div>\n' + '</div>\n' + '<div class="mySlides fade">\n' + '<div class="numbertext">2 / 3</div>\n' + '<img src="image2.jpg" style="width:100%">\n' + '<div class="text">Caption Two</div>\n' + '</div>\n' + '<div class="mySlides fade">\n' + '<div class="numbertext">3 / 3</div>\n' + '<img src="image3.jpg" style="width:100%">\n' + '<div class="text">Caption Three</div>\n' + '</div>\n' + '<a class="prev" onclick="plusSlides(-1)">&#10094;</a>\n' + '<a class="next" onclick="plusSlides(1)">&#10095;</a>\n' + '</div>\n' + '<br>\n' + '<div style="text-align:center">\n' + '<span class="dot" onclick="currentSlide(1)"></span> \n' + '<span class="dot" onclick="currentSlide(2)"></span> \n' + '<span class="dot" onclick="currentSlide(3)"></span> \n' + '</div>\n'; document.body.appendChild(div); 

Answer 5

Here is my suggestion to add HTML code to the div element:

 <div id="container"></div> 

JS code that uses insertAdjacentHTML :

 document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>'); 

And here is a small performance comparison - (2018.07.02) MacOs High Sierra 10.13.3 on Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit):

As we can see, insertAdjacentHTML is faster (Safari 117M operations per second, Chrome 69M, Firefox 39M), so simple javascript is faster than jQuery (in all browsers). innerHTML +=... slower than jQuery for all browsers.

Here you can perform testing on your computer / browser: https://jsperf.com/insert-html-to-div