Adding and removing element part 3

JavaScript Tutorial
DOM & Events
Adding & Removing Elements
25
3/3
         

Replacing Elements



To replace an HTML element, the element.replaceChild(newNode, oldNode) method is used.
For example:
<div id="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var p = document.createElement("p");
var node = document.createTextNode("This is new");
p.appendChild(node);

var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.replaceChild(p, child);
</script>Try It Yourself

The code above creates a new paragraph element that replaces the existing p1 paragraph.

Comments

Post a Comment

Popular posts from this blog

ESC 6 variable and string part 3

Template Literals in ES6 Template literals  are a way to output variables in the  string .  Prior to ES6 we had to break the  string , for example: let name = 'David'; let msg = 'Welcome ' + name + '!'; console.log(msg); Try It Yourself ES6 introduces a new way of outputting  variable  values in strings. The same code above can be rewritten as: let name = 'David'; let msg = `Welcome ${name} !`; console.log(msg); Try It Yourself Notice, that template literals are enclosed by the  backtick  (` `) character instead of double or single quotes. The  ${expression}  is a placeholder, and can include any expression, which will get evaluated and inserted into the template literal. For example: let a = 8; let b = 34; let msg = `The sum is ${a+b} `; console.log(msg); Try It Yourself To escape a backtick in a template literal, put a backslash \ before the backtick.
Read more

Es6 distructing part 3

Object Destructuring in ES6 Similar to Array destructuring,  Object destructuring  unpacks properties into distinct variables. For example: let obj = {h:100, s: true}; let {h, s} = obj; console.log(h); // 100 console.log(s); // true Try It Yourself We can assign without declaration, but there are some syntax requirements for that: let a, b; ({a, b} = {a: 'Hello ', b: 'Jack'}); console.log(a + b); // Hello Jack Try It Yourself The  ()  with a  semicolon (;)  at the end are  mandatory  when destructuring without a declaration. However, you can also do it as follows where the  ()  are not required: let {a, b} = {a: 'Hello ', b: 'Jack'}; console.log(a + b); Try It Yourself You can also assign the  object  to new  variable  names. For example : var o = {h: 42, s: true}; var {h: foo, s: bar} = o; //console.log(h); // Error console.log(foo); // 42 Try It Yourself Finally you can assign  default ...
Read more

ES6 Map & Set part 2

ES6 Set A  Set   object  can be used to hold  unique  values (no repetitions are allowed). A value in a set can be anything (objects and primitive values).  The syntax  new Set([iterable])  creates a Set  object  where  iterable  is an  array  or any other iterable  object  of values. The  size  property returns the number of distinct values in a set. For example: let set = new Set ([1, 2, 4, 2, 59, 9, 4, 9, 1]); console.log(set.size); // 5 Try It Yourself Methods add(value)  Adds a new element with the given value to the Set. delete(value)  Deletes a specified value from the set. has(value)  Returns true if a specified value exists in the set and false otherwise. clear()  Clears the set. values()  Returns an Iterator of values in the set. For example: let set = new Set(); set. add (5). add (9). add (59). add (9); console.log(set. has (9)); for (let v of set. values...
Read more