Can a node of type TEXT_NODE ever have a sibling?



Can a node of type TEXT_NODE ever have a sibling? If so please provide an example.

Thanks!
LVL 10
0h4crying0utloudAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
dakydConnect With a Mentor Commented:
Yes, they can.  In the example below, the <p> is the parent, there is a text node, and the span is its sibling.  Hope that helps.

<html>
<head>
<script type="text/javascript">
function checkForSib()
{
  var obj = document.getElementById("parent");
  var txtNode = obj.childNodes[0];
  alert("node has type of " + txtNode.nodeType + " and value of '" + txtNode.data + "'");
  var sib = txtNode.nextSibling;
  alert(sib + ": " + sib.innerHTML);
}
</script>
</head>

<body>
<p id="parent">some text <span style="font-weight: bold">sibling of "some text"</span></p>

<form>
  <input type="button" onclick="checkForSib();" value="check for sibling">
</form>
</body>
</html>
0
 
0h4crying0utloudAuthor Commented:


Doh!  what I meant was can a textNode ever have another textNode sibling. But you anwser is correct to this question, I'll post another.
0
 
dakydCommented:
Ah, I misunderstood then.  I did some testing, and in a normal HTML document, browsers are smart enough to combine the two would-be text nodes.  An interesting side note is that in the Mozilla browsers, a new line between two html tags causes a textnode to be inserted.  So this:

  <tr>
    <td>blah ...

   Would mean that the first child of the <tr> would be a text node with just "\n", and the second child would be the <td>.  It has to do with the implementation of the browser, but that construct is fairly common, so you often get "extra" text nodes all over the DOM if you're using that browser.

That aside, it's still technically possible to do what you're asking.  It's a bit contrived, but you can use the DOM to forcibly insert a textnode anywhere you want, including as the sibling of another text node:

<html>
<head>
<script type="text/javascript">
function addTxtNode()
{
  var obj = document.getElementById("parent");
  var txt = document.createTextNode(" world");
  obj.appendChild(txt);

  alert("text node1: '" + obj.childNodes[0].data + "'\n" +
        "text node2: '" + obj.childNodes[1].data + "'");
}
</script>
</head>

<body>
<p id="parent">hello<p>

<form>
  <input type="button" value="make text node siblings" onclick="addTxtNode();">
</form>
</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.