diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index 05028cd..96cb4fe 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -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 Some text
then a newline
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 <br/> 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 <br/> tags 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 - -new text
and a newline
+// new text
and a newline
``` @@ -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
@@ -328,8 +322,12 @@ parent.innerHTML = `
``` +:::note To remove all children + To clear the content of any element, you can use `ele.innerHTML = ""`. +::: + ### 8. outerHTML