Insert sibling node in JS

Question

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?

Minko Gechev · Accepted Answer · 2012-01-07 18:26:07Z

Here is how I would do that:

JS

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/

Possible improvements: 1) use 'children' (only elements) instead of 'childNodes' (elements and text nodes); 2) check container's children in 'if': container can be null; 3) use native HTMLElement 'contentEditable' property instead of setAttribute; 4) use 'textContent' instead of 'innerHTML' if you don't require parsing value as HTML (as in this case); 5) use simpler DOM attach methods 'after' and 'before' (most browsers except IE11 support them).

Kevin Farrugia · Accepted Answer · 2017-04-19 06:24:14Z

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

I've been programming for years, and this is the first time I've heard of insertAdjacentElement, and it is absolutely magnificent! Thank you!

Eduardo Rocha · Accepted Answer · 2025-03-19 19:41:19Z

There's also the Element.after() method. The benefit of this method over the other methods is that it allows you to add multiple nodes at the same time.

const container = document.getElementById('editor'); const firstChild = container.childNodes[1]; const newPre1 = document.createElement('pre'); newPre1.setAttribute('contentEditable', 'true'); newPre1.innerHTML = 'foo'; const newPre2 = document.createElement('pre'); newPre2.setAttribute('contentEditable', 'true'); newPre2.innerHTML = 'bar'; firstChild.after(newPre1, newPre2);

Collectives™ on Stack Overflow

Insert sibling node in JS

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related