diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 36400c82..b802791b 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -284,7 +284,7 @@ Here's an example: ``` -**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it as a whole in the outer context.** +**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.** Yeah, sounds strange, and strange it is, that's why we make a separate note about it here. Take a look. @@ -302,7 +302,7 @@ Consider the example: div.outerHTML = '
A new element
'; // (*) *!* - // Wow! The div is still the same! + // Wow! 'div' is still the same! */!* alert(div.outerHTML); //A new element
`. In the outer document we can see the new content instead of the `A new element
`. In the outer document (the DOM) we can see the new content instead of the `A new element
` was inserted instead. -- `div` still has the old value. The new HTML wasn't saved to any variable. +- Another piece of HTML `A new element
` was inserted in its place. +- `div` still has its old value. The new HTML wasn't saved to any variable. It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`. -We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to. It creates the new HTML on its place instead. We can get references to new elements by querying DOM. +We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM. ## nodeValue/data: text node content