通過 javascript 將特定項目移動到 div 元素的底部

Question

例如，我在下面的 div 中動態生成了 lis 中的四個不同值，並且數據來自 Rest API：

<div id=make_last>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</div>

我想通過 javascript 或 jquery 將<li>two</li>移動到底部如下圖

<div>
  <li>one</li>
  <li>three</li>
  <li>four</li>
  <li>two</li>
</div>

有什么想法我怎么能做到這一點？

Answer 1

使用each找到它

var elemTwo;

$("li").each(function() {
  if (this.innerText == "two") elemTwo = this;
}); 

Answer 2

將某些內容移動到 DOM 元素末尾的最簡單方法是 append 它，因為appendChild將元素放在末尾； 它會自動從當前的 position 中刪除該項目。

const container = document.querySelector('#make_last'); // or however you get a reference
const itemToMove = container.children[1]; // or however you want to find the child
container.appendChild(itemToMove);