From：http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

之前（prepend）：

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

我想你正在寻找：

Element.insertAdjacentHTML(position, text);

其中position可以是：
'beforebegin'。
在元素本身之前。
'afterbegin'。
就在元素内部，在它的第一个子元素之前。
'beforeend'。
就在元素内部，在它的最后一个子元素之后。
'afterend'。
元素本身之后。

text是HTML字符串。
Doc @ MDN

可以使用insertBefore()：

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

文件：insertBefore()
没有insertAfter方法。它可以通过将insertBefore方法与nextSibling()组合来模拟：

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