bendtherules/UiQuestions
1
0
Fork 0
mirror of https://github.com/bendtherules/UiQuestions.git synced 2026-08-18 22:02:42 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
bendtherules
2020-11-08 18:41:55 +05:30
parent 29493b0348
commit 89e5f490c7
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/element-child-content.mdx
+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 -** **Example 1 -**
`.innerText` tries to return a string which represents the actual visible text, not the text literally written in html. `.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 -
Note how <br/> tags and the css have a effect on the output -
```jsx ```jsx
<span id="text"> <span id="text">
Some text <br>then a newline<br>and another. Some text <br>then a newline<br>and another.
@@ -255,13 +254,14 @@ console.log(text.innerText)
// THEN A NEWLINE // THEN A NEWLINE
// AND ANOTHER. // AND ANOTHER.
``` ```
:::note
On the other hand, `node.textContent` concatenates the actual text nodes used in the html and returns that string. On the other hand, `node.textContent` concatenates the actual text nodes used in the html and returns that string.
```jsx ```jsx
console.log(text.textContent) console.log(text.textContent)
// Some text then a newlineand another. // Some text then a newlineand another.
``` ```
:::
**Example 2 -** **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. 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> <span id="text"></span>
text.innerText = "new text \n and a newline" text.innerText = "new text \n and a newline"
// NodeList(3) [
// text "new text ", text.childNodes
// br, // NodeList [
// text " and a newline." // text "new text ", br, text " and a newline."
// ] // ]
// result html - // result html -
<span id="text">new text <br/> and a newline</span> // <span id="text">new text <br/> and a newline</span>
``` ```
<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. 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-** **Example 1-**
```jsx ```jsx
<div id="parent"> <div id="parent">
@@ -328,8 +322,12 @@ parent.innerHTML = `
</div> </div>
``` ```
:::note To remove all children
To clear the content of any element, you can use `ele.innerHTML = ""`. 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" /> <MDN title="innerHTML" url="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" />
### 8. outerHTML ### 8. outerHTML