如何删除第一个子项 (.item) 并使用纯 JavaScript 将其附加到末尾？答案

【问题标题】：How can I remove the first child (.item) and append it to the end with pure JavaScript?如何删除第一个子项 (.item) 并使用纯 JavaScript 将其附加到末尾？
【发布时间】：2018-02-16 03:43:55
【问题描述】：

我需要删除#slide 元素中的第一个 .item 并将其附加到 .item 元素的末尾。需要纯 JavaScript 解决方案。

<div class="slider">
    <div class="slide">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
    </div>
    <button class="ctrl-btn pro-prev disabled">Prev</button>
    <button class="ctrl-btn pro-next">Next</button>
</div>

我已经找到了这个 sn-p 并尝试使用。但是失败了。

for (let i = 0; i < slides.childNodes.length; i++) {
    if (slides.childNodes[i].tagName == 'IMG') {
        slides.removeChild(slides.childNodes[i]);
        slides.appendChild(slides.childNodes[slides.childNodes.length - 1]);
        break;
    }
}

【问题讨论】：

你试过什么？
@j08691 我已经更新了这个问题。谢谢。
你在某个未公开的地方找到的代码 sn-p 中的可变幻灯片是什么，（所以，仍然没有尝试过任何东西），它来自哪里？

标签： javascript slider product appendchild removechild

【解决方案1】：

 var slide = document.getElementsByClassName("slide")[0];
 slide.appendChild(slide.children[0]);

【讨论】：

请为您的答案提供一些描述，以使其他人可以阅读/理解。

【解决方案2】：

var slide = document.getElementsByClassName("slide")[0];
var firstChild = slide.children[0];
slide.appendChild(firstChild);

<div class="slider">
    <div class="slide">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product100">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product1">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product2">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
        <img class="item" src="http://via.placeholder.com/200x200?text=Product3">
    </div>
    <button class="ctrl-btn pro-prev disabled">Prev</button>
    <button class="ctrl-btn pro-next">Next</button>
</div>

【讨论】：

你的第三行应该是这样的 //slide.removeChild(slide.children[0]);