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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现prepend并使用常规JavaScript附加?相关的知识,希望对你有一定的参考价值。

如何在不使用jQuery的情况下使用常规javascript实现prependappend

答案

也许你问的是DOM methods appendChildinsertBefore

parentNode.insertBefore(newChild, refChild)

在现有子节点newChild之前插入节点parentNode作为refChild的子节点。 (返回newChild。)

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

另一答案

如果您使用的是Node.js,也可以使用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);
另一答案

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

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

DEMO

警告:insertAdjacentHTML不保留与.addEventLisntener相关的听众。

另一答案

为了简化您的生活,您可以扩展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);
另一答案

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

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>`);
另一答案

这是使用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或undefined,则在子节点列表的末尾插入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

以上是关于如何实现prepend并使用常规JavaScript附加?的主要内容,如果未能解决你的问题,请参考以下文章

apache中的php_value auto_prepend_file如何与php一起使用它总是留在内存中吗?

JavaScrip实现:如何写出漂亮的条件表达式

JavaScrip实现:如何写出漂亮的条件表达式

在 each() 中循环并结合 prepend()

jquery中append跟prepend的用法

JavaScrip继承图文总结