What is the best way to empty a node in JavaScript

by

You have at least four options:

  1. Using innerHTML = "" as you’ve shown in the question. It will make sure the element on which you call it has no child nodes at all, and doesn’t create any new nodes. It’s specified and reliable cross-browser (although there’s an IE bug that may or may not affect your code), and is probably fairly efficient.

  2. Using textContent = "", which is also specified and reliable cross-browser (IE9+) and, interestingly, IE11 (at least) doesn’t seem to have the bug with textContent that it has with innerHTML. It also has the advantage of not requiring an HTML parser, where of course the string you give innerHTML is expected to be HTML. (Browsers may well have an optimization in place for when the string is blank, though.)

  3. You could use removeChild in a loop, but that involves potentially repeated function calls into the DOM:

    // assuming elm is the element
while (elm.firstChild) {
   elm.removeChild(elm.firstChild);
}

  4. You could replace the parent element with a clone omitting the children:

    // assuming elm is the element
const clone = elm.cloneNode(false);
parent.parentElement.replaceChild(clone, elm);
elm = clone;

    Note that unlike the others, this will remove any event handlers on the parent element.

If I had to guess, I’d guess that textContent = "" would be fastest, at least if there are a lot of children. But performance usually doesn’t matter, it’s an extremely rare case where this will be the noticeably slow part of your code. If you run into a situation where it matters, test your actual code usihng each of the options in your target browsers and choose the one that works best.

People love synthetic benchmarks, but synthetic benchmarks are remarkably unreliable and sensitive to benchmark assumptions (such as the number of children being removed).

More Related Contents:

  1. JavaScript charAt problem that I can’t seem to answer correctly [duplicate]
  2. Which equals operator (== vs ===) should be used in JavaScript comparisons?
  3. Submit form without page reloading
  4. How to watch for a route change in AngularJS?
  5. this inside function
  6. How do I test axios in Jest?
  7. garbage collection with node.js
  8. CasperJS bind issue
  9. How to stop all timeouts and intervals using javascript? [duplicate]
  10. Where should I put the CSS and Javascript code in an HTML webpage?
  11. In javascript, is an empty string always false as a boolean?
  12. Falsey values in JavaScript
  13. How to access HTML element without ID?
  14. D3 Differentiate between click and drag for an element which has a drag behavior
  15. How can I load a shared web worker with a user-script?
  16. How can I alias a default import in JavaScript?
  17. How to mute an html5 video player using jQuery
  18. How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?
  19. Upload file to my google drive with Google Apps Script (NO FORM IN GOOGLE)
  20. NVD3 – How to refresh the data function to product new data on click
  21. Firebase retrieve child keys but not values
  22. Javascript Shorthand for getElementById
  23. How do you make images load lazily only when they are in the viewport?
  24. JavaScript: What are .extend and .prototype used for?
  25. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
  26. Error: Attempt to run compile-and-go script on a cleared scope
  27. Conflict on Template of Twig and Vue.js
  28. Auto refresh in ASP.NET MVC
  29. Chart JS custom tooltip option?
  30. Decode HTML entity in Angular JS

Leave a Comment