在JS中插入兄弟节点

发布于 2024-12-25 11:18:27 字数 796 浏览 5 评论 0原文

所以我有一个带有一些 pre 标签的 div，如下所示：

<div id="editor" >
    <pre contentEditable="true">1</pre>
    <pre contentEditable="true">2</pre>
    <pre contentEditable="true">3</pre>
</div>

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

（只是事件处理程序中的一个片段，e 是事件）

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 中感觉很恶心。我将如何设置新的兄弟节点？

原文

So I have a div with some pre tags in it, like so:

<div id="editor" >
    <pre contentEditable="true">1</pre>
    <pre contentEditable="true">2</pre>
    <pre contentEditable="true">3</pre>
</div>

Now I want to use Javascript to put a new pre node between 1 and 2. I've been trying to do it this way (since I understand the DOM is a doubly linked tree), but I'm getting the sense that maybe the pointers aren't editable as I'm approaching it.

(just a snippet inside an event handler, e being the event)

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

Those last two lines are from my c++ experience, but feel icky in JS. How would I set a new sibling node?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

成熟稳重的好男人 2025-01-01 11:18:27

这是我的做法：

var container = document.getElementById('editor'),
    firstChild = container.childNodes[1];
if (container && firstChild) {
    var newPre = document.createElement('pre');
    newPre.setAttribute("contentEditable", "true");
    newPre.innerHTML = "boom";  
    firstChild.parentNode.insertBefore(newPre, firstChild.nextSibling);    
}

jsfiddle: http://jsfiddle.net/bZGEZ/

Here is how I would do that:

var container = document.getElementById('editor'),
    firstChild = container.childNodes[1];
if (container && firstChild) {
    var newPre = document.createElement('pre');
    newPre.setAttribute("contentEditable", "true");
    newPre.innerHTML = "boom";  
    firstChild.parentNode.insertBefore(newPre, firstChild.nextSibling);    
}

jsfiddle: http://jsfiddle.net/bZGEZ/

回复收藏 0 原文

玉环 2025-01-01 11:18:27

您还可以使用 insertAdjacentElement 或 < a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML" rel="noreferrer">insertAdjacentHTML；两者都采用选项beforebegin、beforeend、afterbegin和afterend。

例子：

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

You could also insert a new sibling using insertAdjacentElement or insertAdjacentHTML; both of which take the options beforebegin, beforeend, afterbegin and afterend.

Example:

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

回复收藏 0 原文

~没有更多了~