I have a div with some children within and its directly contained text like below:
<div id="price">
100$
<span>some ads</span>
<span>another ads</span>
for each
</div>
I want to get directly contained text '100$' in this DOM element.
I tried with innerHTML
, innerText
and textContent
.
But they show all text including children's text like below:
const element = document.getElementById('price');
console.log(element.innerText);
console.log(element.innerHTML);
console.log(element.textContent);
<div id="price">
100$
<span>some ads</span>
<span>another ads</span>
for each
</div>
The expected result is 100$
(I don't need "for each") which is directly contained text in parent element. So then I can get the price and its currency.
note: jquery is also allowed to use.
Use the textContent property to get the text of an html element, e.g. const text = box. textContent . The textContent property returns the text content of the element and its descendants. If the element is empty, an empty string is returned.
The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object.
Use the textContent property to get the text of a div element, e.g. const result = element. textContent . The textContent property will return the text content of the div and its descendants. If the element is empty, an empty string is returned.
.clone()
clones the selected element.
.children()
selects the children from the cloned element
.remove()
removes the previously selected children
.end()
selects the selected element again
.text()
gets the text from the element without children
const elementText = $("#price").clone()
.children()
.remove()
.end()
.text();
console.log(elementText.trim().split("\n")[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
Parent
<span>Child 1</span>
<span>Child 2</span>
</div>
<div id="price">
100$
<span>some ads</span>
<span>another ads</span>
for each
</div>
EDIT: You can also use this:
$("#price").contents().get(0).nodeValue.trim()
Filter the childNodes
to include only text nodes and use textContent
of each of the matching nodes:
const text = Array.prototype.filter
.call(element.childNodes, (child) => child.nodeType === Node.TEXT_NODE)
.map((child) => child.textContent)
.join('');
The text
includes the full markup of the text, including newlines. If this is undesired, use text.trim()
.
The filter.call
is used because childNodes
is a NodeList
, which is array-like, but does not support .filter
method.
To get text only for the first node
const text = Array.prototype.filter
.call(element.childNodes, (child) => child.nodeType === Node.TEXT_NODE)[0];
Alternatively, if you can rely on the fact that the value is always the first child, the above can be simplified to
const text = element.childNodes[0];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With