javascript - 如何使用常规 JavaScript 实现前置和附加？

Question

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

score 179 · Accepted Answer

这里有一个片段让你去：

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

score 154 · Accepted Answer

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

parentNode.insertBefore(newChild, refChild)

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

如果refChild为 null，newChild则添加到子列表的末尾。等效且更具可读性的是，使用 parentNode.appendChild(newChild).

score 32 · Accepted Answer

您在这里没有给我们太多内容，但我认为您只是在问如何将内容添加到元素的开头或结尾？如果是这样，您可以很容易地做到这一点：

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

相当容易。

score 14 · Accepted Answer

如果你想插入一个原始的 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.

score 7 · Accepted Answer

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

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

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

结果：

<p>Example text</p>

score 1 · Accepted Answer

在 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()) } }

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

您还可以使用 unshift() 预先添加到列表

于 2019-04-29T02:16:56.587 回答

score 0 · Accepted Answer

document.write() 不是一个好习惯，如果您使用它，Chrome 等一些浏览器会给您一个警告，如果您将它提供给客户，这可能是一个糟糕的解决方案，他们不想使用您的代码并且在调试控制台中查看警告！

此外，如果您将代码提供给已经在其网站上使用 jQuery 实现其他功能的客户，那么 jQuery 也可能是一件坏事，如果已经运行了不同版本的 jQuery，则会发生冲突。

如果您想将内容插入 iframe，并使用纯 JS、没有 JQuery 和没有 document.write()，我有一个解决方案。

您可以使用以下步骤

1.选择您的 iframe：

var iframe = document.getElementById("adblock_iframe");

2.创建一个要插入框架的元素，比如说一个图像：

var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) {
    img.style.width = "200px";
    img.style.height = "50px";
} else {
    img.style.width = "400px";
    img.style.height = "100px";
}
img.id = "image";

3.将图片元素插入iframe：

iframe.contentWindow.document.body.appendChild(img);

score -1 · Accepted Answer

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

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

javascript - 如何使用常规 JavaScript 实现前置和附加？

12 回答 12

Related

Reference