<div id='test'>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
function removeAllNodeChildren(node) {
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
return node;
}
function purge(node) {
if (node.hasChildNodes()) {
node.innerHTML = '';
}
return node;
}
removeAllNodeChildren(document.getElementById('test').cloneNode(true));
purge(document.getElementById('test').cloneNode(true));
$(document.getElementById('test').cloneNode(true)).html('')
document.getElementById('test').cloneNode(true).replaceChildren();
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
removeChild | |
innerHTML | |
jQuery | |
replaceChildren |
Test name | Executions per second |
---|---|
removeChild | 13232.0 Ops/sec |
innerHTML | 20030.9 Ops/sec |
jQuery | 14821.2 Ops/sec |
replaceChildren | 13927.2 Ops/sec |
Let's break down the provided JSON and explain what is being tested.
Benchmark Definition
The benchmark defines four test cases:
innerHTML
: Uses the purge
function to clear the inner HTML of an element.removeChild
: Uses the removeAllNodeChildren
function to remove all child nodes from an element, then clones the original node and removes its children again.jQuery
: Uses jQuery's html
method to clear the inner HTML of an element.replaceChildren
: Uses the replaceChildren
method to replace the contents of an element with a new set of elements.Options Compared
The benchmark compares the performance of these four approaches:
innerHTML
property to an empty string.html
method to clear the inner HTML of an element.Pros and Cons
Here are some pros and cons for each approach:
innerHTML
.innerHTML
.Other Considerations
When using these approaches, it's essential to consider the following factors:
Alternative Approaches
Other approaches to clear an element's contents without modifying its structure include:
textContent
instead of innerHTML
.In summary, the benchmark provides a comprehensive comparison of four approaches for clearing an element's contents. Understanding the pros and cons of each approach will help you choose the most efficient solution for your specific use case.