Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I get H1 innerText in JavaScript without the innerText of its child?
Getting the inner text of an HTML element is a common task when developing web applications. In JavaScript, it can be done using the innerText property of the HTMLElement object. However, this only returns the text within that particular element and not any of its child elements.
If you need to get just the H1 tag's innertext without including its child elements' innertext, then there are several ways to do so. This article will discuss some methods for getting an H1 tag's innertext in JavaScript without including its child elements' innertext.
The rendered text content of a node, and its descendants is represented by the innerText property of the HTMLElement interface. As a getter, it simulates the text the user would obtain if they used the cursor to highlight the element's contents and then copied them to the clipboard.
Syntax
Following is the syntax for innerText in JavaScript.
element.innerText
Let's look into the following examples to understand more about how can I get h1 innertext in JavaScript without the innertext of its child.
Using childNodes[0].textContent
In the following example we are using the first child text node to get only the direct text content of the h1 element.
<!DOCTYPE html>
<html>
<body>
<div class="Bike">
<div class="Car">
<label for="name"><b>Actual Text:</b></label>
<h1> This is BMW<span> That Was Ducati </span></h1>
</div>
</div>
<h3>Innertext:</h3>
<div id="result1"></div>
<script>
const h1 = document.querySelector('div.Car h1');
const text = h1.childNodes[0].textContent;
document.getElementById('result1').textContent = text;
</script>
</body>
</html>
This is BMW
Looping Through Text Nodes
Considering the following example where we loop through all child nodes and extract only text nodes, ignoring element nodes like span.
<!DOCTYPE html>
<html>
<body>
<div class="tutorial">
<div class="tutorial1">
<label for="actual"><b>Actual Text:</b></label><br>
<h1>Welcome <span>to the Tutorialpoint</span> HELLO </h1>
</div>
</div>
<h3>Innertext:</h3>
<div id="result2"></div>
<script>
const h1 = document.querySelector('div.tutorial h1');
const el = h1.childNodes;
let result = "";
for(let i = 0; i < el.length; i++){
if(el[i].nodeName == '#text'){
result += el[i].textContent;
}
}
document.getElementById('result2').textContent = result;
</script>
</body>
</html>
Welcome HELLO
Alternative Approach with cloneNode
Let's look into another example that uses cloneNode to extract only direct text content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="first-header">
<div class="second-header">
<h1> This is h1 tag........<span>This is span tag inside h1 tag.......... </span></h1>
</div>
</div>
<h3>Result:</h3>
<div id="result3"></div>
<script>
var valueOfh1 = document.querySelector('div.second-header h1');
var clonedElement = valueOfh1.cloneNode(true);
// Remove all child elements
var children = clonedElement.children;
for(let i = children.length - 1; i >= 0; i--) {
clonedElement.removeChild(children[i]);
}
var value = clonedElement.textContent;
document.getElementById('result3').textContent = value;
</script>
</body>
</html>
This is h1 tag........
Comparison of Methods
| Method | Use Case | Pros | Cons |
|---|---|---|---|
| childNodes[0].textContent | Single text node at start | Simple and fast | Only gets first text node |
| Loop through childNodes | Multiple text nodes | Gets all direct text | More code required |
| cloneNode + remove children | Complex nested structure | Most comprehensive | Performance overhead |
Conclusion
Use childNodes[0].textContent for simple cases or loop through childNodes to extract all direct text content. The cloneNode approach works best for complex nested structures where you need to preserve all direct text while excluding child elements.
3K+ Views
