什么是jQuery在本机javascript中的功能之后和之前的等价物？

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

Answer 2

我猜你在找：

Element.insertAdjacentHTML(position, text);

位置是：

  

＆＃39; beforebegin＆＃39 ;.
  在元素本身之前。

     

＆＃39; afterbegin＆＃39 ;.
  就在元素内部，在它的第一个孩子之前。

     

＆＃39; beforeend＆＃39 ;.
  就在元素内部，在它的最后一个孩子之后。

     

＆＃39; afterend＆＃39 ;.
  元素本身之后。

文本是一个HTML字符串。

Doc @ MDN

Answer 3

您可以使用insertBefore()：

var node = document.getElementById('id');
node.parentNode.insertBefore('something', node);

文档：insertBefore()

没有insertAfter方法。可以通过将insertBefore方法与nextSibling()：

组合来模拟它

node.parentNode.insertBefore('something', node.nextSibling);