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

2020/11/09 11:22 · javascript ·  · 0评论

如何在不使用jQuery的情况下使用常规JavaScript进行前置追加

也许您在问DOM方法 appendChildinsertBefore

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);
本文地址:http://javascript.askforanswer.com/ruheshiyongchangguijavascriptshixianqianzhihezhuijia.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!