Merge pull request #394 from brentguf/modifying-the-dom

Modifying the dom
This commit is contained in:
Ilya Kantor 2018-03-03 09:08:00 +03:00 committed by GitHub
commit 4918bddcf0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 13 deletions

View file

@ -4,6 +4,6 @@ The browser has to fix it automatically. But there may be no text inside the `<t
Now it's obvious that when we remove the table, it remains.
The question can be easily answered by exploring DOM using the browser tools. They show `"aaa"` before the `<table>`.
The question can be easily answered by exploring the DOM using the browser tools. It shows `"aaa"` before the `<table>`.
The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.

View file

@ -2,9 +2,9 @@ importance: 1
---
# Why "aaa" remains?
# Why does "aaa" remain?
Run the example. Why `table.remove()` does not delete the text `"aaa"`?
Run the example. Why does `table.remove()` not delete the text `"aaa"`?
```html height=100 run
<table id="table">

View file

@ -30,7 +30,7 @@ Here's how it will look:
*/!*
```
That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are still in the HTML or an external CSS).
That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are still in the HTML or an external CSS file).
## Creating an element
@ -61,7 +61,7 @@ div.className = "alert alert-success";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
```
After that, we have a ready DOM element. Right now it's in the variable, but can not be seen, because not inserted into the page yet.
After that, we have a ready DOM element. Right now it's in the variable, but can not be seen, because it's not been inserted into the page yet.
## Insertion methods
@ -135,9 +135,8 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl
*/!*
</script>
```
To insert as the first element, we can do like this:
To insert `newLi` as the first element, we can do it like this:
```js
list.insertBefore(newLi, list.firstChild);
```
@ -204,7 +203,7 @@ before
after
```
These methods can insert multiple list of nodes and text pieces in a single call.
These methods can insert multiple lists of nodes and text pieces in a single call.
For instance, here a string and an element are inserted:
@ -303,7 +302,7 @@ So here's an alternative variant of showing a message:
How to insert one more similar message?
We could do a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
We could make a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
Sometimes when we have a big element, that may be faster and simpler.
@ -338,7 +337,7 @@ An example of copying the message:
## Removal methods
To remove nodes, there are following methods:
To remove nodes, there are the following methods:
`parentElem.removeChild(node)`
@ -412,7 +411,7 @@ The call to `document.write(html)` writes the `html` into page "right here and n
The method comes from times when there were no DOM, no standards... Really old times. It still lives, because there are scripts using it.
In modern scripts we can rarely see it, because of the important limitation.
In modern scripts we can rarely see it, because of the following important limitation:
**The call to `document.write` only works while the page is loading.**
@ -480,4 +479,4 @@ Insertion and removal of nodes:
- To append HTML to the page before it has finished loading:
- `document.write(html)`
After the page is loaded such call erases the document. Mostly seen in old scripts.
After the page is loaded such a call erases the document. Mostly seen in old scripts.