Alternative for innerHTML?

by

The recommended way is through DOM manipulation, but it can be quite verbose. For example:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

EDIT

In response to your edit, in order to replace the current content, you simply remove the existing content, then use the code above to fill in new content. For example:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

But as someone else said, I’d recommend using something like jQuery instead, as not all browsers fully support DOM, and those that do have quirks which are dealt with internally by JavaScript libraries. For example, jQuery looks something like this:

$('#someID').html("<p>Hello, <b>World</b>!</p>");

More Related Contents:

  1. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  2. Show/hide ‘div’ using JavaScript
  3. Why is “element.innerHTML+=” bad code?
  4. How to replace innerHTML of a div using jQuery?
  5. Advantages of createElement over innerHTML?
  6. Can scripts be inserted with innerHTML?
  7. nodeValue vs innerHTML and textContent. How to choose? [duplicate]
  8. Javascript – Append HTML to container element without innerHTML
  9. JavaScript get TextArea input via .value or .innerHTML?
  10. Why does the Promise constructor need an executor?
  11. React.js: Set innerHTML vs dangerouslySetInnerHTML
  12. Add/remove HTML inside div using JavaScript
  13. Change label text using JavaScript
  14. Setting innerHTML: Why won’t it update the DOM?
  15. Javascript Iframe innerHTML
  16. Add inline style using Javascript
  17. Javascript – innerHTML not working with HTML select menus
  18. Append HTML to container element without innerHTML
  19. setting innerHTML with a script inside [duplicate]
  20. IE8 does not support querySelectorAll
  21. unable to cope with the asynchronous nature of navigator.geolocation
  22. JQuery html() vs. innerHTML
  23. find a value of table cell
  24. reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
  25. It says that TypeError: document.getElementById(…) is null [duplicate]
  26. Remove all content using pure JS
  27. Uncaught Typeerror: cannot read property ‘innerHTML’ of null
  28. innerHTML removes attribute quotes in Internet Explorer
  29. addEventListener gone after appending innerHTML
  30. What can service workers do that web workers cannot?

Leave a Comment