编写此DOM操作的更有效/适当的方法？

Question

I'm a beginner in Vanilla JavaScript and just made code to change HTML below. It works but I'd like to know if there is a more efficient/appropriate way of doing this. Thank you in advance for your help.

HTML BEFORE

<section id="anchor-a">
<p>lorem ipsum....</p>
</section>
<section id="anchor-b">
<p>lorem ipsum....</p>
</section>

HTML AFTER

<section>
<div id="anchor-a" class="anchor"></div>
<p>lorem ipsum....</p>
</section>
<section>
<div id="anchor-b" class="anchor"></div>
<p>lorem ipsum....</p>
</section>

My JavaScript Code

const anchor = document.querySelectorAll('[id^="anchor-"]');
anchor.forEach((element) => {
  let newDiv = document.createElement('div');
  newDiv.classList.add('anchor');
  newDiv.setAttribute('id', element.getAttribute("id"));
  ;
  element.insertBefore(newDiv, element.firstChild);
  element.removeAttribute('id');
});

Answer 1

A more concise version would be to insertAdjacentHTML , which might be easier to read:

 const anchor = document.querySelectorAll('[id^="anchor-"]'); anchor.forEach((section) => { section.insertAdjacentHTML('afterbegin', `<div id="${section.id}">`); section.removeAttribute('id'); }); // next line is not needed, just cleans up the console output for demonstration document.currentScript.remove(); console.log(document.body.innerHTML); 

 <section id="anchor-a"> <p>lorem ipsum....</p> </section> <section id="anchor-b"> <p>lorem ipsum....</p> </section> 

Also note that querySelectorAll returns a NodeList , and only newer browsers have a NodeList.prototype.forEach function. For older browsers and IE, either include a polyfill, or use Array.prototype.forEach.call instead:

 Array.prototype.forEach.call( document.querySelectorAll('[id^="anchor-"]'), (section) => { section.insertAdjacentHTML('afterbegin', `<div id="${section.id}">`); section.removeAttribute('id'); } ); // next line is not needed, just cleans up the console output for demonstration document.currentScript.remove(); console.log(document.body.innerHTML); 

 <section id="anchor-a"> <p>lorem ipsum....</p> </section> <section id="anchor-b"> <p>lorem ipsum....</p> </section> 

(also, of course, if using ES6+ syntax, remember to transpile down to ES5 in addition to polyfills if you want to support ancient browsers)

Answer 2

Focusing this answer on performance, manipulating DOM in a loop is a bad idea. DOM interactions are the expensive operation, it is always advised to perform operation in loop.

What I would suggest is:

• Locate the parent element where search is to be performed.
• Make a clone of that.
• Perform your action on the elements. Since you are working on clone, you are not changing anything on DOM. Any operation done is in memory only.
• Now remove this container element and add processed clone to the parent element.

 var container = document.querySelector('.container'); var copy = container.cloneNode(true); const anchor = copy.querySelectorAll('[id^="anchor-"]'); anchor.forEach((element) => { let newDiv = document.createElement('div'); newDiv.classList.add('anchor'); newDiv.setAttribute('id', element.getAttribute("id"));; element.insertBefore(newDiv, element.firstChild); element.removeAttribute('id'); }); container.insertAdjacentElement('afterend', copy) container.remove(); 

 <div class='container'> <section id="anchor-a"> <p>lorem ipsum....</p> </section> <section id="anchor-b"> <p>lorem ipsum....</p> </section> </div> 

Note: not changing any code relation to element processing as CertainPerformance 's addresses that

Interesting read:

• DOM interaction tips/dos and don'ts - Bergi