Question

-4

Insert sibling node in JS

rated 0 times [ 1] [ 5] / answers: 1 / hits: 36244 / 13 Years ago, sat, january 7, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

denver

Add To Favorites

Follow

Total Points: 232

Total Questions: 111

Total Answers: 103

Location: South Korea

Member since Sat, Oct 2, 2021

3 Years ago

denver questions

1 How do I recognize swipe events in React?

Thu, Jan 6, 22, 00:00, 2 Years ago

1 No relational fields in response Strapi v4

Fri, Dec 10, 21, 00:00, 3 Years ago

1 AntD rowSelection functional Component

Wed, Sep 16, 20, 00:00, 4 Years ago

1 Swiper slider active class on slides in viewport and current class on one only

Wed, Feb 12, 20, 00:00, 4 Years ago

1 How to make multiple HTTP requests with RxJS and merge the response into one payload and map it to another action?

Mon, Oct 14, 19, 00:00, 5 Years ago

View All

answered 13 Years ago monica · Accepted Answer

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/