Javascript 循环：插入元素仅在最后一次迭代中起作用

Question

I'm working in Wordpress and trying to add an excerpt to each portfolio card in a grid (there's no way for me to do this via the theme.

Here is the custom script that I am using. Everything works as expected, except that only the last node in the list gets the excerpt. I've changed the number of iterations around to test this and it always just inserts the excerpt on the last node that it iterates through.

Based on this it appears that each new iteration undoes or erases what the prior one did.

window.onload = function() {
    const targets = document.querySelectorAll('.entry-header');
    const parent = document.createElement('div');
    const child = document.createElement('p');
    const excerpt = 'This will be the excerpt...';
    
    parent.className = "entry-excerpt";
    parent.appendChild(child);
    child.innerHTML = excerpt;
    
    for (let i = 0; i < targets.length; i++) {
      targets[i].after(parent);
    }
    
  };

I logged targets[i] and each iteration prints correctly

Answer 1

You only have one parent element, which visits your entry-header s on the page.

You should try putting everything in the loop. As I assume the excerpts will be different for each entry, you should create a method to generate them dynamically or fetch them from somewhere.

 const targets = document.querySelectorAll('.entry-header'); window.onload = function() { for (let i = 0; i < targets.length; i++) { parent = getExcerpt(i); targets[i].after(parent); } }; function getExcerpt(index) { const parent = document.createElement('div'); const child = document.createElement('p'); const excerpt = 'This will be the excerpt...'; parent.className = "entry-excerpt"; parent.appendChild(child); child.innerHTML = excerpt; return parent; }

Answer 2

Please put the parent inside the loop. Checkout the below example

 const targets = document.querySelectorAll('.entry-header'); for (let i = 0; i < targets.length; i++) { const parent = document.createElement('div'); const child = document.createElement('p'); const excerpt = 'This will be the excerpt...'; parent.className = "entry-excerpt"; parent.appendChild(child); child.innerHTML = excerpt; targets[i].after(parent); }

 <div class="entry-header">Entry Header 1</div> <div class="entry-header">Entry Header 2</div> <div class="entry-header">Entry Header 3</div>