javascript - 原生 javascript 中 jQuery 函数的 after 和 before 等价于什么？

Question

我以前一直使用 jQuery，但我想将以下内容切换为原生 javascript，以获得更好的网站性能。

var first = $('ul li:first');
var first = $('ul li:last');

$(last).before(first);
$(first).after(last);

Answer 1

来自:http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

之前(前置):

var el = document.getElementById('thingy'),
    elChild = document.createElement('div');
elChild.innerHTML = 'Content';

// Prepend it
el.insertBefore(elChild, el.firstChild);

之后(附加):

// Grab an element
var el = document.getElementById('thingy'),
    // Make a new div
    elChild = document.createElement('div');

// Give the new div some content
elChild.innerHTML = 'Content';

// Jug it into the parent element
el.appendChild(elChild);

获取第一个和最后一个li:

var lis = document.getElementById("id-of-ul").getElementsByTagName("li"),
    first = lis[0],
    last = lis[lis.length -1];

如果您的 ul 没有 id，您始终可以使用 getElementsByTagName("ul") 并找出其索引，但我建议添加一个 id