element-child-content - Clarify text and wrap some text in note

This commit is contained in:
2020-11-08 18:41:55 +05:30
parent 29493b0348
commit 89e5f490c7
+12 -14
View File
@@ -242,8 +242,7 @@ Can be set, to **replace the element's children** with the given string. It crea
**Example 1 -**
`.innerText` tries to return a string which represents the actual visible text, not the text literally written in html.
Note how <br/> tags and the css have a effect on the output -
`.innerText` tries to return a string which represents the actual visible text, not the text literally written in html. Notice how <br/> tags and the css affects the output -
```jsx
<span id="text">
Some text <br>then a newline<br>and another.
@@ -255,13 +254,14 @@ console.log(text.innerText)
// THEN A NEWLINE
// AND ANOTHER.
```
:::note
On the other hand, `node.textContent` concatenates the actual text nodes used in the html and returns that string.
```jsx
console.log(text.textContent)
// Some text then a newlineand another.
```
:::
**Example 2 -**
As setter, it replaces `\n` and `\r\n` in the input string with &lt;br/&gt; tags and wraps the rest in text nodes.
@@ -270,14 +270,14 @@ As setter, it replaces `\n` and `\r\n` in the input string with &lt;br/&gt; tags
<span id="text"></span>
text.innerText = "new text \n and a newline"
// NodeList(3) [
// text "new text ",
// br,
// text " and a newline."
text.childNodes
// NodeList [
// text "new text ", br, text " and a newline."
// ]
// result html -
<span id="text">new text <br/> and a newline</span>
// <span id="text">new text <br/> and a newline</span>
```
<span>
@@ -294,12 +294,6 @@ Returns the **html markup contained within the element** as a string.
Can be set, to replace the **contents of the element with nodes parsed** from the given string. The existing content will be removed.
:::note To insert instead of replace
To **insert** the html into the element rather than replacing it, read about the method [`insertAdjacentHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML).
:::
**Example 1-**
```jsx
<div id="parent">
@@ -328,8 +322,12 @@ parent.innerHTML = `
</div>
```
:::note To remove all children
To clear the content of any element, you can use `ele.innerHTML = ""`.
:::
<MDN title="innerHTML" url="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" />
### 8. outerHTML