Get parent's text without it's children using JS

Question

var el = document.getElementById("parentDiv");
console.log(el.textContent);
console.log(el.innerText);
console.log(el.innerHTML);

<div id="parentDiv">
  parent div
  <p>p</p>
  <div>
    this text is in a div

    <span>span</span>
    <a>im a link!</a>
    <div>
      another div
      <div>
        <span><a>link in a span</a></span>
      </div>
    </div>
  </div>
</div>

When running this, it always returns 'parent div' plus all the text from the child elements. Is there a way to only return 'parent div' using js?

Already answered [here](https://stackoverflow.com/a/19919496/6352706) — Ben Harris, Feb 09 '18 at 15:28

score 5 · Accepted Answer · answered Feb 09 '18 at 15:25

Loop over all the child nodes, skip any which are not text nodes, take the text from those.

var el = document.getElementById("parentDiv");
var text = "";
for (let i = 0; i < el.childNodes.length; i++) {
    let node = el.childNodes[i];
    if (node.nodeType  === Node.TEXT_NODE) {
        text += node.data;
    }
}
console.log(text);

<div id="parentDiv">
  parent div
  <p>p</p>
  <div>
    this text is in a div

    <span>span</span>
    <a>im a link!</a>
    <div>
      another div
      <div>
        <span><a>link in a span</a></span>
      </div>
    </div>
  </div>
</div>

Just FWIW: `for (var child = el.firstChild; child; child = child.nextSibling)` :-) — T.J. Crowder, Feb 09 '18 at 15:27

score 2 · Answer 2 · answered Feb 09 '18 at 15:29

One of the easiest ways is to clone the parent, remove the non-TEXT-NODE children from the clone, and then get the text:

const element = document.getElementById('parent');
const clone = element.cloneNode(true); // use deep

Array.prototype.slice.call(clone.children).forEach(child => {
  child.nodeType !== Node.TEXT_NODE && clone.removeChild(child);
});

const result = clone.innerHTML;

console.log(result);

<div id="parent">
 PARENT
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>

Get parent's text without it's children using JS

2 Answers2