Removing and replacing elements

Replace Element

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

// Add id
newHeading.id = 'task-title';

// Create new text node
newHeading.appendChild(document.createTextNode('Task List')); 

// Get the old heading we want to replace
const oldHeading = document.getElementById('task-title');

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

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

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 & Attributes

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');
link.setAttribute('href', 'http://google.com');
link.setAttribute('title', 'Google');
link.removeAttribute('title');

val = link;

console.log(val);
Was this page helpful?

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *