В этом коде я хочу вывод как 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>
0
user12054439 31 Май 2020 в 14:51

7 ответов

Лучший ответ

Вот мой ответ, я решил это сам.

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>
0
Kashyap Kumar 6 Июн 2020 в 13:01

Вы можете использовать ниже:

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>
0
Ayushya 31 Май 2020 в 12:00

клонирование элемента не приводит к удалению исходного элемента

Тогда как я могу получить требуемый вывод? Я попытался удалить реальный элемент в конце кода. Но это создает еще одну ошибку. В этом случае на выходе получается 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>
0
Mister Jojo 31 Май 2020 в 13:05

У вас уже есть узел "P" внутри узла "DIV". Затем вы создаете еще три. Все вместе вы получаете четыре "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);
          }
        }
0
Bandula Dharmadasa 31 Май 2020 в 12:20

Это нормально, потому что у вас есть три клона и оригинал, поэтому в качестве последнего шага вы должны удалить оригинал

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>
1
pc_coder 31 Май 2020 в 16:00

Ваш код создает 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>
-2
Sanjay Achar 31 Май 2020 в 12:50
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>
1
Jens Ingels 31 Май 2020 в 20:13