Question

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

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

请问，我怎样才能将其翻译成VanillaJS？

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

到目前为止：

的document.getElementById（ '夜间'）li.appendTo.document.getElementById（ '日'）;

Answer 1

在纯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]);
}

有关工作示例，请参阅fiddle。

Answer 2

看起来像这样

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

Answer 3

您可以尝试这样的事情：

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]);
}

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

将简单的Jquery翻译成VanillaJS

3 个答案: