this.nextSibling not working

javascript siblings
moroccan_dev picture moroccan_dev · Nov 15, 2014 · Viewed 13.6k times · Source

I expect the following code to alert "out"

<input type=text onfocus="alert(this.nextSibling.id)" />
<output id="out">this is output</output>

But it alerts undefined WHY?

Answer

undefined picture undefined · Nov 15, 2014

nextSibling selects the very next sibling node of the element. The very next node can also be a textNode which doesn't have an id property, hence you get the undefined value. As the other answer suggests you could use the nextElementSibling property which refers to the next sibling node that has nodeType of 1 (i.e. an Element object) or remove the hidden characters between the elements.

Note that IE8 doesn't support the nextElementSibling property.

Related questions

Is there a way to select sibling nodes?

For some performance reasons, I am trying to find a way to select only sibling nodes of the selected node. For example, <div id="outer"> <div id="inner1"></div> <div id="inner2">&…

Read More
Hide an element's next sibling with Javascript

I have an element grabbed from document.getElementById('the_id'). How can I get its next sibling and hide it? I tried this but it didn't work: elem.nextSibling.style.display = 'none'; Firebug error was elem.nextSibling.style is undefined.

Read More
Insert sibling node in 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</…

Read More