<html>
<body>
<script language="JavaScript">
function function1() {
var m = document.getElementById("myNodeOne").nextSibling;
m.innerHTML = "asdfsdf";
}
</script>
<p>This PARAGRAPH has two nodes,
<b id="myNodeOne">Node One</b>, and
<b id="myNodeTwo">Node Two</b>.
</p>
<p></p>
<button onclick="function1();">Node One has a Next Sibling</button>
</body>
</html>
This should print "asdfsdf" in second paragraph tag. But its not working.
<html>
<body>
<script language="JavaScript">
function function1() {
var m = document.getElementById("myNodeOne").nextSibling;
m.innerHTML = "asdfsdf";
}
</script>
<p>This PARAGRAPH has two nodes,
<b id="myNodeOne">Node One</b>, and
<b id="myNodeTwo">Node Two</b>.
</p>
<p></p>
<button onclick="function1();">Node One has a Next Sibling</button>
</body>
</html>
This should print "asdfsdf" in second paragraph tag. But its not working.
Share Improve this question asked Jul 5, 2012 at 14:46 Wasim A.Wasim A. 9,89022 gold badges93 silver badges121 bronze badges 3- As others have stated. This link looks useful: v3.thewatchmakerproject.com/journal/329/… – Lee Taylor Commented Jul 5, 2012 at 14:54
- Note that nextSibling is not a function, it's a property. – 1j01 Commented Sep 21, 2015 at 21:09
- @Wasim Check this if it helps – Xameer Commented Jul 18, 2016 at 12:29
6 Answers
Reset to default 16Try to use nextElementSibling instead of nextSibling
function function1() {
var m = document.getElementById("myNodeOne").nextElementSibling;
m.innerHTML = "asdfsdf";
}
It works because it only fetches HTML elements.
A couple of issues:
- if you store in the variable m a DOM element and then you set any m property, the DOM will not be affected at all.
- document.getElementById("myNodeOne").nextSibling is not myNode2, but
the text element
, andbetween the two nodes.
Try this:
function function1() {
document.getElementById("myNodeOne").parentNode.nextSibling.nextSibling.innerHTML = "asdfsdf";
}
Demo
nextSibling returns the node immediately following this node. If there is no such node, it returns null.
Since the immediate following node is a TEXT_NODE, it returns that. Here are all the nodeTypes:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12
Here is an example of how to filter by node type:
function function1() {
var m = document.getElementById("myNodeOne").nextSibling;
if (m.nodeType != 1) {
m = m.nextSibling;
}
m.innerHTML = "asdfsdf";
}
This is because next sibling of your first div is text node: , and
Text nodes doesn't have innerHTML attribute
You need to use:
document.getElementById("myNodeOne").nextSibling.nextSibling
You have to take into account the text, which is present between your <b>...</b> tags, and is correctly returned as a nextSibling of the first of them
function function1() {
var m = document.getElementById("myNodeOne");
m.nextSibling.nextSibling.innerHTML = "asdfsdf";
}
looks like the next sibling for your myNodeOne is ", and" if you want to get to the next one you'll have to put:
var m = document.getElementById("myNodeOne").nextSibling;
m.nextSibling.innerHTML= "asdfsdf";