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

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

Changing element part 2

Changing Style The style of HTML elements can also be changed using JavaScript. All style attributes can be accessed using the  style  object  of the element.  For example: <div id="demo" style="width:200px">some text</div> <script> var x = document. getElementById ("demo"); x.style.color = "6600FF"; x.style.width = "100px"; </script> Try It Yourself The code above changes the text  color  and  width  of the div element. All CSS properties can be set and modified using JavaScript. Just remember, that you cannot use dashes (-) in the property names: these are replaced with camelCase versions, where the compound words begin with a capital letter.  For example: the  background-color property should be referred to as  backgroundColor .
Read more