From c622f3c1f93d702659d80be2a0521838eaf2d50b Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Tue, 6 Feb 2018 10:58:53 +0100 Subject: [PATCH 1/4] Up until Cloning Nodes --- 2-ui/1-document/07-modifying-document/article.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index 6680450a..55ac0ee6 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -6,8 +6,6 @@ Here we'll see how to create new elements "on the fly" and modify the existing p First we'll see a simple example and then explain the methods. -[cut] - ## Example: show a message For a start, let's see how to add a message on the page that looks nicer than `alert`. @@ -32,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 @@ -63,7 +61,7 @@ div.className = "alert alert-success"; div.innerHTML = "Hi there! 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 @@ -137,9 +135,8 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl */!* ``` - - 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); ``` @@ -206,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: From c7744f9f5e7b7b008be68d02676d15c363da266b Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Tue, 6 Feb 2018 11:11:06 +0100 Subject: [PATCH 2/4] Update article.md --- 2-ui/1-document/07-modifying-document/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index 55ac0ee6..38e1199e 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -302,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. @@ -337,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)` @@ -411,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.** @@ -479,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. From 746c6d9fa05902e402627ab220714d76b544f1a4 Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Tue, 6 Feb 2018 11:19:20 +0100 Subject: [PATCH 3/4] Update task.md --- 2-ui/1-document/07-modifying-document/5-why-aaa/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md index aedf8697..03064ed2 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md @@ -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 From cf7b5e274ec7d349a5fd945b0fff0552ea6e27ea Mon Sep 17 00:00:00 2001 From: Brent Guffens Date: Tue, 6 Feb 2018 11:21:00 +0100 Subject: [PATCH 4/4] Update solution.md --- 2-ui/1-document/07-modifying-document/5-why-aaa/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md index 25c1e819..6b85168b 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md @@ -4,6 +4,6 @@ The browser has to fix it automatically. But there may be no text inside the ``. +The question can be easily answered by exploring the DOM using the browser tools. It shows `"aaa"` before the `
`. The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.