<div id="demodiv"> Hi! I am a text node. </div>
when we want to access this node first we will need to target the tag element which is parent for this HTML text(in this case the DIV). so we use:
console.log(document.getElementById("demodiv").innerHTML); //access inner html of tag element with id "demodiv"
output on console:
Hi! I am a text node.
similarly we can set the value to change it to something else as shown in following code snippet.
document.getElementById("demodiv").innerHTML = "Hi! I am the new Text Node"; console.log(document.getElementById("demodiv").innerHTML);
this will result in the change of HTML text displayed on the browser as well as you will see the new text on console output:
Hi! I am the new Text Node
This is quite all about the text node manipulation, isn't this so easy ? Not only the text but you can change overall HTML of the target element using innerHTMl. For example. you can set the content of the "demodiv" to a paragraph element.
document.getElementById("demodiv").innerHTML = "<p>Hi This is a paragraph inside the demodiv</p>";
this will update the "demodiv" DOM and add a new paragraph(<p>) element inside it.