JS-DOM(replace element)

Author: AdrianMiftahulH

JavaScript-DOM/app.js

@@ -98,8 +98,27 @@ li.setAttribute('title', 'new item')
 // ### add innerHTML ###
 li.innerHTML = '<a href="/" class="btn btn-danger btn-sm delete-item">x</a>';
 
-// Create append text node
+// ### Create append text node ### 
 li.appendChild(document.createTextNode("This New Text"))
 
-// execution new element
-document.querySelector('ul.list-group').appendChild(li);
+// ### execution new element ###
+document.querySelector('ul.list-group').appendChild(li);
+
+// ## Replace Element ## 
+
+// Create element
+const newHeading = document.createElement('h3');
+
+// Add id
+newHeading.id = 'task-title';
+
+// New Text Node
+newHeading.appendChild(document.createTextNode('Task List'));
+
+// get old element
+const oldHeading = document.getElementById('card-title');
+// get parent
+const cardHeader = document.querySelector('.card-header');
+
+// Replace
+cardHeader.replaceChild(newHeading, oldHeading);

JavaScript-DOM/index.html

@@ -20,7 +20,7 @@
             <div class="col-md-12">
                 <div class="card">
                     <div class="card-header" id="task-title">
-                        Task List
+                        <h5 id="card-title">Task</h5>
                     </div>
                     <div class="card-body">
                         <form id="form-task">