将简单的Jquery翻译成VanillaJS

Translate simple Jquery to VanillaJS

本文关键字：VanillaJS 翻译 Jquery 简单      更新时间：2023-09-26

我有这个：$('#night > li').appendTo('#day');

代码将<ul id="night">的所有元素移动到<ul id="day">的末尾<li>。

请问，我怎样才能把它翻译成香草JS？

我

的意思是，如何重写代码以便我不需要 Jquery？

到目前为止有这个：

document.getElementById（'night'）.li.appendTo.document.getElementById（'day'）;

在纯JavaScript中，你可以这样做：

var night = document.getElementById("night");
var day = document.getElementById("day");
var lis = document.querySelectorAll("#night > li");
for (var i = 0, len = lis.length; i < len; i++) {
  day.appendChild(lis[i]);
}

有关工作示例，请参阅小提琴。

可能看起来像这样

var target = document.getElementById( 'day' );
[].forEach.call(document.querySelectorAll( '#night > li' ), function( li ) {
    day.appendChild( li );
});

你可以尝试这样的事情：

var dayUl = document.getElementById("day");
var nightUl = document.getElementById("night");
var nightLis = nightUl.childNodes;
for (var i = 0, len = nightLis.length; i < len; i++) 
{
    dayUl.appendChild(nightLis[i]);
}

此外，您可以使用 Ekwall 的解决方案@Marcus但请记住，该解决方案与 IE8 或更低版本并不完全兼容，并且夜间节点的第一个查询是多余的（因为在下面他搜索 #night> li）

相关文章：