Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)

by

Try assigning to the innerHTML property of an anonymous element and appending each of its children.

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}
var html="<h1 id="title">Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>";
appendHtml(document.body, html); // "body" has two more children - h1 and span.

More Related Contents:

  1. How can I change an element’s class with JavaScript?
  2. How to stop event propagation with inline onclick attribute?
  3. Converting HTML string into DOM elements?
  4. Changing CSS Values with Javascript
  5. Get next / previous element using JavaScript?
  6. Get selected option text with JavaScript
  7. How can I simulate a click to an anchor tag?
  8. Finding line-wraps
  9. How to get the element clicked (for the whole document)?
  10. What is innerHTML on input elements?
  11. JavaScript DOM: Find Element Index In Container
  12. Adding an onclick event to a table row
  13. Select all elements with a “data-xxx” attribute without using jQuery
  14. Is innerHTML asynchronous?
  15. Does the onchange event propagate?
  16. Change ‘s option and trigger events with JavaScript
  17. Is there any “on DOM change” event? [duplicate]
  18. Can I apply CSS to the elements within an iframe?
  19. contentDocument for an iframe
  20. Why does getElementById not work on elements inside the document element? [duplicate]
  21. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  22. Does HTML Hidden control have any events? Like onchange or something?
  23. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  24. Uncaught TypeError: Cannot read property ‘top’ of undefined
  25. Get elements from page.evaluate in Puppeteer? [duplicate]
  26. Trying to set a span element equal to a variable value in a JS Rock, Paper, Scissors Game
  27. Getting HTML elements by their attribute names
  28. How can I get access to a Highcharts chart through a DOM-Container?
  29. Why does
  30. Is there a way to know if a link/script is still pending or has it failed

Leave a Comment