Text Nodes Example

Example 1

In this example, we retrieve different properties of the content of a paragraph.

Here is an example of marked up text in a paragraph.

Code:

<script>
	function showme(){ 
	  var p=document.getElementById('para');
	  var tx=p.firstChild;
	  //the first child is the first text content, before the strong tag
	  var el = document.getElementById("output");
	  el.innerHTML = "This is retrieved from first child of paragraph with id para: " + tx.data ;
	  el.innerHTML += "This is its wholeText: " + tx.wholeText ;
	  el.innerHTML += "This is its textContent: " + p.textContent ;
	  
	  var childArr = [];
	  childArr = p.childNodes;
	  tx = childArr[1].firstChild;
	  //gets the text in the strong tag
	  el.innerHTML += "This is retrieved from first child of the second child of paragraph with id para: " + tx.data ;
	  el.innerHTML += "This is its wholeText: " + tx.wholeText ;
	  el.innerHTML += "This is its textContent: " + p.textContent ;

	  tx = childArr[3].firstChild;
	  //gets the text in the span
	  el.innerHTML += "This is retrieved from first child of the fourth child of paragraph with id para: " + tx.data ;
	  el.innerHTML += "This is its wholeText: " + tx.wholeText ;
	  el.innerHTML += "This is its textContent: " + p.textContent;
  
	}
</script>

Output: