javascript - 使用javascript更改多个图像的位置

Question

我找不到可以帮助我解决问题的答案。我可以使用以下代码更改名为 .c-articleimage （包括图像）的 div 的位置，以放置在 .c-article__lead 之后：

var articleimage = document.querySelector('.c-articleimage');
var newposition = document.querySelector('.c-article__lead');
newposition.insertAdjacentElement('afterend', articleimage);

但是，如果我有多个 .c-articleimage 和 .c-article__lead 怎么办？我在想我可以使用 querySelectorAll 吗？但我可能需要以某种方式循环它？

var articleimage = document.querySelectorAll('.c-articleimage');
var newposition = document.querySelectorAll('.c-article__lead');
newposition.insertAdjacentElement('afterend', articleimage);

我怎么能解决这个问题？

最好的，

标签： javascript

Answer 1

该功能insertAdjacentElement适用​​于节点。但是，两者articleimage都是newposition节点列表。如果要在最后一个newposition节点之后插入，则需要选中它：

function moveai(){
  var articleimage = document.querySelectorAll('.c-articleimage');
var newposition = document.querySelectorAll('.c-article__lead');
  var lastnew = newposition.item(newposition.length - 1);
  articleimage.forEach(function(el){
    lastnew.insertAdjacentElement('afterend', el);
    lastnew = el;
  });
}

.c-articleimage{
  color: red;
}

<div class='c-articleimage'>One</div>
<div class='c-articleimage'>Two</div>
<div class='c-article__lead'>Three</div>
<div class='c-article__lead'>Four</div>

<button onclick='moveai()'>Move</button>

如果按下按钮，元素One和Two移动到下方Three和Four。