Replace & Remove Elements

Replace

 

// Create Element
const newHeading = document.createElement("h2");

// Add an id
newHeading.id = "task-title";

// New text node
newHeading.appendChild(document.createTextNode("Task List"));

// Get the old Heading
const oldHeading = document.querySelector("#task-title");

// Parent
const cardAction = document.querySelector(".card-action");

// Replace
cardAction.replaceChild(newHeading, oldHeading);

console.log(newHeading);

 

Remove

 

// Remove element
const lis = document.querySelectorAll("li");
const list = document.querySelector("ul");

// Remove list item
lis[0].remove();

// Remove child element
list.removeChild(lis[3]);

// Classes & Attr
const firstLi = document.querySelector("li:first-child");
const link = firstLi.children[0];

let val;

// Classes
val = link.className;
val = link.classList;
val = link.classList[0];
link.classList.add("test");
link.classList.remove("test");
val = link;

// Attributes
val = link.getAttribute("href");
val = link.setAttribute("href", "http://google.com");
link.setAttribute("title", "google");
val = link.hasAttribute("title");
link.removeAttribute("title");
val = link;

console.log(val);