这是一个让你继续前进的片段：

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它之前。

也许您在询问DOM 方法 appendChild和insertBefore.

parentNode.insertBefore(newChild, refChild)

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

如果refChild为空，newChild则添加到子项列表的末尾。同样，更易读，使用 parentNode.appendChild(newChild).

您在这里没有给我们太多内容，但我认为您只是在问如何将内容添加到元素的开头或结尾？如果是这样，您可以通过以下方法轻松完成：

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