jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Up until Cloning Nodes

Browse source
This commit is contained in:
Brent Guffens 2018-02-06 10:58:53 +01:00 • committed by GitHub
parent 2a3182ad94
commit c622f3c1f9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
2-ui/1-document/07-modifying-document/article.md
View file

@ -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. First we'll see a simple example and then explain the methods.
[cut]
## Example: show a message ## Example: show a message
For a start, let's see how to add a message on the page that looks nicer than `alert`. 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 ## Creating an element
@ -63,7 +61,7 @@ div.className = "alert alert-success";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message."; 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 ## Insertion methods
@ -137,8 +135,7 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl
*/!* */!*
</script> </script>
``` ```
To insert `newLi` as the first element, we can do it like this:
To insert as the first element, we can do like this:
```js ```js
list.insertBefore(newLi, list.firstChild); list.insertBefore(newLi, list.firstChild);
@ -206,7 +203,7 @@ before
after 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: For instance, here a string and an element are inserted: