如何实现prepend并使用常规JavaScript附加？

Question

如何在不使用jQuery的情况下实现prepend并使用常规JavaScript 追加？

Answer 1

这是一个让你前进的片段:

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之前.

Answer 2

也许你问的是DOM方法 appendChild和insertBefore.

parentNode.insertBefore(newChild, refChild)

在现有子节点之前插入节点newChild作为parentNode子节点refChild.(退货newChild.)

如果refChild为null,newChild则在子项列表的末尾添加.等效,更可读,使用 parentNode.appendChild(newChild).

Answer 3

你没有给我们太多的东西继续在这里,但我想你只是问如何在元素的开头或结尾添加内容？如果是这样,你可以很容易地做到这一点:

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

满容易.

Answer 4

如果要插入原始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>");

DEMO

警告: insertAdjacentHTML不保留附加的侦听器.addEventLisntener.

Answer 5

我在我的项目中添加了这个，它似乎有效：

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

Answer 6

为了简化您的生活，您可以扩展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);

Answer 7

下面是使用 prepend 将段落添加到文档的示例。

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

结果：

<p>Example text</p>