javascript - 如何使用javascript交换html div元素位置

Question

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

如何使用 Javascript 交换 Div 的位置？它也应该在 HTML 文档中更改吗？

喜欢 :

<div>7</div>
<div>5</div>
<div>1</div>
<div>4</div>
<div>2</div>
<div>6</div>
<div>3</div>

它应该像这样改变，也应该保存在 HTML 文档中

Answer 1

这是解决问题的最简单方法。
将外部 div 的/节点视为内容将被替换的容器或内部位置。 (您不必替换 div，但必须替换它们的内容。)

function replaceContent(x, z){
  // save the inner html of the first node in temp
  let temp = document.getElementById(x).innerHTML;
  // move the innerHtml of the second node into first node
  document.getElementById(x).innerHTML = document.getElementById(z).innerHTML;
  // replace the second node's inner html with temp (saved previously)
  document.getElementById(z).innerHTML = temp;
}

// replace the divs of id 2 and 4
replaceContent("2", "4");

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>