Skip to content

Commit 15d0394

Browse files
authored
Update article.md
On first and second reading, I found this section very confusing. After looking up outerHTML on Mozilla and doing some tests, I came to understand what was being said (I think). Here I'm proposing some changes to, I hope, make it clearer (plus some little grammar changes).
1 parent 4088e5d commit 15d0394

File tree

1 file changed

+7
-7
lines changed
  • 2-ui/1-document/05-basic-dom-node-properties

1 file changed

+7
-7
lines changed

2-ui/1-document/05-basic-dom-node-properties/article.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ Here's an example:
284284
</script>
285285
```
286286
287-
**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it as a whole in the outer context.**
287+
**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.**
288288
289289
Yeah, sounds strange, and strange it is, that's why we make a separate note about it here. Take a look.
290290
@@ -302,26 +302,26 @@ Consider the example:
302302
div.outerHTML = '<p>A new element</p>'; // (*)
303303
304304
*!*
305-
// Wow! The div is still the same!
305+
// Wow! 'div' is still the same!
306306
*/!*
307307
alert(div.outerHTML); // <div>Hello, world!</div> (**)
308308
</script>
309309
```
310310
311311
Looks really odd, right?
312312
313-
In the line `(*)` we replaced `div` with `<p>A new element</p>`. In the outer document we can see the new content instead of the `<div>`. But, as we can see in line `(**)`, the old `div` variable is still the same!
313+
In the line `(*)` we replaced `div` with `<p>A new element</p>`. In the outer document (the DOM) we can see the new content instead of the `<div>`. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed!
314314
315-
The `outerHTML` assignment does not modify the DOM element, but removes it from the outer context and inserts a new piece of HTML instead of it.
315+
The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place.
316316
317317
So what happened in `div.outerHTML=...` is:
318318
- `div` was removed from the document.
319-
- Another HTML `<p>A new element</p>` was inserted instead.
320-
- `div` still has the old value. The new HTML wasn't saved to any variable.
319+
- Another piece of HTML `<p>A new element</p>` was inserted in its place.
320+
- `div` still has its old value. The new HTML wasn't saved to any variable.
321321
322322
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`.
323323
324-
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.
324+
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.
325325
326326
## nodeValue/data: text node content
327327

0 commit comments

Comments
 (0)