额外输出输出

Question

在这段代码中，我希望输出为 a b c，但最后还有另一个 a 输出。那么，我该怎么做呢？

window.onload = function() {
  for (let i = 0; i < 3; i++) {
    var story = document.getElementsByClassName('story')[0];

    let clone = story.cloneNode(true);

    let usr = ["a", "b", "c"];


    document.getElementsByClassName('story')[i].innerHTML = usr[i];


    document.getElementById("story").appendChild(clone);
  }
}

<div id="story">
  <p class="story"></p>
</div>

Answer 1

这是正常的，因为你有三个克隆和原始，所以作为最后一步你应该删除原始

window.onload= function(){
    var main_story=document.getElementById("story");
    var story = document.getElementsByClassName('story')[0];
    let usr = ["a", "b", "c"];
    for (let i = 0; i < 3; i++) {   
      let clone = story.cloneNode(true);          
      clone.innerHTML = usr[i];
      main_story.appendChild(clone);
    }
    story.remove();
}

<div id="story">
    <p class="story"></p>
</div>

Answer 2

const setup = () => {
	let storySource = document.querySelectorAll('.story')[0];
  let story = document.querySelector('#story');
  let userList = ["a", "b", "c"];
  
  for (let i = 0; i < 3; i++) {
		let clone = storySource.cloneNode(true);
    clone.textContent = userList[i];
    story.appendChild(clone);
  }
  storySource.remove();

};

//load
window.addEventListener('load', setup);

<div id="story">
  <p class="story"></p>
</div>

Answer 3

您可以使用以下内容：

window.onload= function(){
    let usr = ["a", "b", "c"];

    for (let i = 0; i < 3; i++) {
      var story = document.createElement('p');
      story.classList.add('story');
      story.innerText= usr[i];
      document.getElementById("story").appendChild(story);
    }
  }

也更新为

<div id="story">
</div>

Answer 4

“DIV”节点内已经有一个“P”节点。然后，您创建另外三个。总之，你会得到四个“P”节点。

使用以下代码解决您的问题。

window.onload = function() {

        let usr = ["a", "b", "c"];    

          for (let i = 0; i < 3; i++) {


            let newP = document.createElement("p");
            newP.setAttribute("class", "story");
            newP.innerHTML = usr[i];

            document.getElementById("story").appendChild(newP);
          }
        }

Answer 5

克隆项目不会删除原始项目

那么，我怎样才能得到所需的输出呢？我尝试删除代码末尾的真实元素。但它会产生另一个错误。在这种情况下，输出是 b c a 。

如果你的元素很复杂，你也可以使用 DOM 解析器来创建你的新元素

const DomParser   = new DOMParser()
  ,   usrTab      = ['a', 'b', 'c']
  ,   storyDiv    = document.getElementById('story')
  ;
const newElement_X=(arg)=>
  {
  let elmX = `<p class="story">${arg}</p>`
  return DomParser.parseFromString( elmX, 'text/html').body.firstChild
  }
window.onload=()=>
  {
  for (let usrVal of usrTab)
    {
    storyDiv.appendChild( newElement_X(usrVal) )
    }
  }

<div id="story"></div>

Answer 6

这是我的答案，我自己解决了。

window.onload = function() {
  for (let i = 0; i < 3; i++) {
    //changing index to i
    var story = document.getElementsByClassName('story')[i];

    let clone = story.cloneNode(true);

    let usr = ["a", "b", "c"];


    document.getElementsByClassName('story')[i].innerHTML = usr[i];


    document.getElementById("story").appendChild(clone);
  }
    //removing last child
    document.getElementsByClassName('story')[3].remove();
}

<div id="story">
  <p class="story" style="background-color: red;"></p>
</div>

Answer 7

您的代码正在创建 3 个元素 + 1 个已经存在。我已更新代码以使用索引。

window.onload = function() {
  const users = ["a", "b", "c"];
  
  users.forEach(function(user) {
    const el = document.createElement("p");
    el.innerHTML = user;
    el.className = 'story';
    
    document.getElementById("story").appendChild(el);
  });
}

<div id="story"></div>