How to retrieve the text of a DOM Text node?

Active3 hr before
Viewed126 times

8 Answers


If you mean get the value of the first text node in the element, this code will work:,This gets the contents of the selected element, and applies a filter function to it. The filter function returns only text nodes (i.e. those nodes with nodeType == Node.TEXT_NODE).,ES6 version that return the first #text node content, Why does "brother" have the instrumental case in this Polish sentence?

var text = $(".title").contents().filter(function() {
   return this.nodeType == Node.TEXT_NODE;
load more v

Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML. , Note: textContent and HTMLElement.innerText are easily confused, but the two properties are different in important ways. , Setting textContent on a node removes all of the node's children and replaces them with a single text node with the given string value. , For other node types, textContent returns the concatenation of the textContent of every child node, excluding comments and processing instructions. (This is an empty string if the node has no children.)

let text = someNode.textContent
someOtherNode.textContent = string
load more v

First, select the div element with the id note by using the getElementById() method.,Then, display the text of the node by accessing the textContent property.,The following example uses the textContent property to get the text of the <div> element:,To get the text content of a node and its descendants, you use the textContent property:

To get the text content of a node and its descendants, you use the textContent property:

.wp - block - code {
      border: 0;
      padding: 0;

   .wp - block - code > div {
      overflow: auto;

   .shcb - language {
      border: 0;
      clip: rect(1 px, 1 px, 1 px, 1 px); -
      webkit - clip - path: inset(50 % );
      clip - path: inset(50 % );
      height: 1 px;
      margin: -1 px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1 px;
      word - wrap: normal;
      word - break: normal;

   .hljs {
      box - sizing: border - box;

   .hljs.shcb - code - table {
      display: table;
      width: 100 % ;

   .hljs.shcb - code - table > .shcb - loc {
      color: inherit;
      display: table - row;
      width: 100 % ;

   .hljs.shcb - code - table.shcb - loc > span {
      display: table - cell;

   .wp - block - code code.hljs: not(.shcb - wrap - lines) {
      white - space: pre;

   .wp - block - code code.hljs.shcb - wrap - lines {
      white - space: pre - wrap;

   .hljs.shcb - line - numbers {
      border - spacing: 0;
      counter - reset: line;

   .hljs.shcb - line - numbers > .shcb - loc {
      counter - increment: line;

   .hljs.shcb - line - numbers.shcb - loc > span {
      padding - left: 0.75 em;

   .hljs.shcb - line - numbers.shcb - loc::before {
      border - right: 1 px solid #ddd;
      content: counter(line);
      display: table - cell;
      padding: 0 0.75 em;
      text - align: right; -
      webkit - user - select: none; -
      moz - user - select: none; -
      ms - user - select: none;
      user - select: none;
      white - space: nowrap;
      width: 1 % ;
let text = node.textContent;
Code language: JavaScript(javascript)
load more v

We can use the data or nodeValue property to get the text contained in a text node.,We can set text node content by setting the data property.,We can insert more data to the text node by writing:,To get a sibling, we can use the nextSibling property.

For example, we can wire:

const textNode = document.createTextNode('hello');
load more v

For a given Text node in the DOM, one can use one of these properties to retrieve its text: , Retrieve DOM text node location ,But which one to use? Which one is the most reliable and cross-browser supported?,(If multiple properties are 100% reliable and cross-browser, then which one would be most appropriate?)

load more v

For a given Text node in the DOM, one can use one of these properties to retrieve its text: ,nodeValue should be is cross-browser compatible. It is part of the original DOM Level 2 specification.,When you're 100% sure that it's a text node you can use any of them.,Also have a look at the compatibility table of for that matter (that's what I always use to see which properties are supported by which browsers).

load more v

DOMDocument::createTextNode — Create new text node,DOMDocument::createElement() - Create new element node,DOMDocument::createComment() - Create new comment node,DOMDocument::createCDATASection() - Create new cdata node

load more v

Description: Get the combined text contents of each element in the set of matched elements, including their descendants.,Description: Set the content of each element in the set of matched elements to the specified text.,DOM Insertion, Inside ,DOM Insertion, Outside

<div class="demo-container">
   <div class="demo-box">Demonstration Box</div>
      <li>list item 1</li>
      <li>list <strong>item</strong> 2</li>
load more v