FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

XML DOM textContent Property


Element Object Reference Element Object

Example

The following code fragment loads "books.xml" into xmlDoc and gets text nodes from the first <title> element:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (xhttp.readyState == 4 && xhttp.status == 200) {
       myFunction(xhttp);
   }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("title")[0];
    document.getElementById("demo").innerHTML =
    "Text Nodes: " + x.textContent;
}

The output of the code above will be:

Text Nodes: Everyday Italian
Try it Yourself »

Definition and Usage

The textContent property returns or sets the text from the selected element.

On returning text, this property returns the value of all text nodes within the element node.

On setting text, this property removes all child nodes and replaces them with a single text node.

Note: This property does not work in Internet Explorer 9 (it returns undefined).

Syntax

Return text:

elementNode.textContent

Set text:

elementNode.textContent=string

Tips and Notes

Tip: For setting and returning the text value from a node you should use the text node nodeValue property.


Example 2

The following code fragment loads "books.xml" into xmlDoc and gets text nodes from the first <book> element, and replaces all nodes with a new text node:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        myFunction(xhttp);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML =
    "Before: " + x.textContent + "<br>";

    x.textContent = "hello";
    document.getElementById("demo").innerHTML +=
    "After: " + x.textContent;
}

The output of the code above will be:

Before: Everyday Italian Giada De Laurentiis 2005 30.00
After: hello
Try it Yourself »

Element Object Reference Element Object