Question

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

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

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

然后，如何获得所需的输出？我尝试在代码末尾删除real元素。但这会创建另一个Bug。在这种情况下，输出为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 5

“ 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 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个已存在。我已经更新了代码以使用索引。

stages:
  - stage: "Tests"
    variables:
      - group: MyLibrary
    ${{ if ne(variables['Build.SourceBranchName'], 'master') }}:
      - template: azure-pipelines-template-variables-private.yml

variables:
  - name: MyVar1
    value: 'TEST-$(Build.BuildId)'
  - name: MyVar2
    value: '/Builds/$(BUILD.BUILDID)'

输出额外的输出

7 个答案: