如何使用常规JavaScript实现前置和追加？

如何在不使用jQuery的情况下使用常规JavaScript 实现前置和追加？

也许您在问DOM方法 appendChild和insertBefore。

parentNode.insertBefore(newChild, refChild)

将节点newChild作为parentNode现有子节点之前的子节点插入refChild。（返回newChild。）

如果refChild为null，则将其newChild添加到子级列表的末尾。等效地，更可读地使用 parentNode.appendChild(newChild)。

这是一个片段，可以助您一臂之力：

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChild将为我们提供其中的第一个元素的引用，theParent并放在其theKid前面。

您在这里没有给我们太多的工作，但是我想您只是在问如何在元素的开头或结尾添加内容？如果是这样，这是您可以轻松完成的操作：

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

挺容易。

如果要插入原始HTML字符串，无论多么复杂，都可以使用： insertAdjacentHTML和适当的第一个参数：

'beforebegin' 在元素本身之前。 'afterbegin' 在元素内部，在其第一个子元素之前。 'beforeend' 在元素的最后一个子元素之后。 'afterend' 在元素本身之后。

提示：您始终可以调用Element.outerHTML以获取表示要插入的元素的HTML字符串。

用法示例：

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

演示

注意： insertAdjacentHTML不会保留带有的监听器.addEventLisntener。

我将此添加到我的项目中，它似乎可以工作：

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

例：

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

为了简化您的生活，您可以扩展HTMLElement对象。它可能不适用于较旧的浏览器，但绝对会让您的生活更轻松：

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

因此，下次您可以执行以下操作：

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

这是一个使用prepend向文档添加段落的示例。

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

结果：

<p>Example text</p>

在2017年，我知道Edge 15和IE 12的prepend方法不包含在Div元素的属性中，但是如果有人需要快速引用来实现polyfill函数，我可以这样做：

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

与大多数现代浏览器兼容的简单箭头功能。

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

如果referenceElement为null或未定义，则newElement将插入到子节点列表的末尾。

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

可以在此处找到示例：Node.insertBefore

您还可以使用unshift（）在列表之前

这不是最好的方法，但是如果有人想在所有内容之前插入元素，这是一种方法。

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);