首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在JS中插入同级节点

在JS中插入同级节点
EN

Stack Overflow用户
提问于 2012-01-08 02:16:45
回答 1查看 34.6K关注 0票数 25

所以我有一个包含一些pre标签的div,如下所示:

代码语言:javascript
复制
<div id="editor" >
    <pre contentEditable="true">1</pre>
    <pre contentEditable="true">2</pre>
    <pre contentEditable="true">3</pre>
</div>

现在我想使用Javascript将一个新的pre节点放在1和2之间。我一直在尝试这样做(因为我知道DOM是一个双向链接树),但我有一种感觉,当我接近它时,指针可能是不可编辑的。

(只是事件处理程序中的一个代码片段,e是事件)

代码语言:javascript
复制
var tag = e.srcElement;
    if(tag.nextSibling){
        var next = tag.nextSibling;
        var newPre = document.createElement('pre');
        newPre.setAttribute("contentEditable", "true");
        newPre.innerHTML = "boom";
        tag.nextSibling = newPre;
        newPre.nextSibling = next;
    }

最后两行来自我的c++体验,但在JS中感觉很讨厌。如何设置新的同级节点?

EN

回答 1

Stack Overflow用户

发布于 2017-04-19 14:24:14

您还可以使用insertAdjacentElementinsertAdjacentHTML插入一个新的同级;这两个选项都采用beforebeginbeforeendafterbeginafterend选项。

示例:

代码语言:javascript
复制
var container = document.getElementById('editor'),
firstChild = container.childNodes[1];

var newPre = document.createElement('pre');
newPre.setAttribute("contentEditable", "true");
newPre.innerHTML = "boom";  
firstChild.insertAdjacentElement("afterend", newPre);
票数 29
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8771921

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档