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

位置是：

'beforebegin'。
在元素本身之前。

'afterbegin'。
就在元素內部，在其第一個孩子之前。

'beforeend'。
在元素的最后一個子元素之后。

'afterend'。
在元素本身之后。

文本是HTML字符串。

文件@ MDN

Answer 3

您可以使用insertBefore() ：

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

文檔： insertBefore（）

沒有insertAfter方法。 可以通過將insertBefore方法與nextSibling（）結合起來進行仿真：

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