Get text of child element javascript

Question

Get the Text of an HTML element using JavaScript #

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.

Table of Contents Show

Get the Text of an HTML element using JavaScript #
How do you get an element of a child?
Which Javascript function is used to select the child tag from the parent element?
Which property maintains the Childelements of an element?
What is childNode?

Here is the HTML for the examples in this article.

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">
      Apple, <span style="background-color: yellow">Banana</span>, Kiwi
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

Copied!
const box = document.getElementById('box');

// 👇️ Apple, Banana, Kiwi
console.log(box.textContent);

// 👇️ Apple, Banana, Kiwi
console.log(box.innerText);

We used the textContent property to get the text content of the element and its descendants.

The property returns the concatenation of the text content of every child node, excluding comments.

The property returns an empty string if the element on which it was accessed is empty.

You might get leading or trailing spaces when using textContent depending on the structure of your HTML. If you need to remove any leading or trailing spaces, use the trim() method.

Copied!
const box = document.getElementById('box');

// 👇️ "Apple, Banana, Kiwi"
console.log(box.textContent.trim());

The code snippet also showed that we can use the innerText property to get the text content of an element and its descendants.

Copied!
const box = document.getElementById('box');

// 👇️ "Apple, Banana, Kiwi"
console.log(box.innerText);

However, there are some important differences between the textContent and innerText properties:

textContent gets the content of all elements, including script and style elements, whereas innerText only gets the content of "human-readable" elements.
innerText is aware of styling and does not return the text of hidden elements, whereas textContent does not take styles into consideration.
using textContent can prevent cross-site scripting attacks.

Because innerText takes CSS styles into account, when the property is accessed, a reflow is triggered to ensure the styles are up-to-date.

Reflows can be expensive and should be avoided when possible.

When you use textContent and innerText to set the element's text content, the element's child nodes get removed.

The child nodes of the element get replaced with a single text node with the provided string value.

If you need to set an element's text content, use the insertAdjacentText method instead.

Copied!
const box = document.getElementById('box');

// ✅ Update text content of element
box.insertAdjacentText('beforeend', ', Mango');

// ✅ Update HTML content of element
box.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: lime">, Melon</span>',
);

The insertAdjacentText method does not remove the child nodes of the element it was called on.

The insertAdjacentText method takes the following 2 parameters:

position - the position relative to the element of where the text should be inserted. Can be one of the following 4:

beforebegin - before the element itself.
afterbegin - just inside the element, before its first child.
beforeend - just inside the element, after its last child.
afterend - after the element itself.

data - the string from which to create a new text node to insert at the given position.

We added a string inside of the element, after its last child. However, you can change the first parameter of the method depending on your use case.

The example also shows how to use the insertAdjacentHTML method, which takes the same first parameter as insertAdjacentText.

Copied!
const box = document.getElementById('box');

// ✅ Update HTML content of element
box.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: lime">, Melon</span>',
);

However, you shouldn't use user generated input without escaping it, because this leads to a cross-site scripting vulnerability.

How do you get an element of a child?

To get the first child element of a specified element, you use the firstChild property of the element:.

let firstChild = parentElement.firstChild; ... .

let content = document.getElementById('menu'); let firstChild = content.firstChild.nodeName; console.log(firstChild); ... .

#text..

Which Javascript function is used to select the child tag from the parent element?

jQuery children() function. jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element.

Which property maintains the Childelements of an element?

The children property returns a collection of an element's child elements.

What is childNode?

The childNodes property is a property of Node in Javascript and is used to return a Nodelist of child nodes. Nodelist items are objects, not strings and they can be accessed using index numbers. The first childNode starts at index 0. Syntax element.childNodes.

kode javascript What is childNode?