(js) => blog

Modifying the DOM

Page section: posts
TAGS: the DOM
More on the DOM

Too do: use insertBefore on the list (bottom)

Properties for DOM modification

Property example Display in the console
createElement() const newDiv = document.createElement('div');
className newDiv.className = 'text-box'; changes all the classes of an element
id newDiv.id = 'new-div';
setAttribute() newDiv.setAttribute('title', 'Hello'); takes two params, the attribute and the attribute’s value. Creates the attribute if it doesn’t exist.
getAttribute() newDiv.getAttribute('title'); one parameter, the name of the attribute. Get’s it’s value.
hasAttribute() newDiv.hasAttribute('title'); one parameter, the name of the attribute. Returns a boolean.
removeAttribute() newDiv.removeAttribute('title'); one parameter, the name of the attribute.
createTextNode() newDiv.createTextNode('Some text to read')
appendChild() const nuLi = document.createElement('li');
itemList.appendChild(nuLi);
insertBefore() container.insertBefore(myDiv, h1) where all 3 have been defined before (container, myDiv and h1). The two params are first the element to be inserted and second the element to be inserted before.
insertAdjacentHTML() container.insertAdjacentHTML('beforeend', paragraph) The first parameter is the position. Can be beforebegin, afterbegin, beforeend and afterend. The second parameter is some HTML, typically stored in a variable
insertAdjacenElement() container.insertAdjacenElement('afterbegin', span) The first parameter is the position again. The second parameter is an HTML element.

NB. When using createElement() the new element doesn’t exist in the DOM until you place it somewhere using appendChild.

Changing classes

Whereas className will replace any existing classes of an element classList() can add, remove, toggle or check a single class on an element.

Proptery example description
classList() newDiv.classList(); gets a list of the classes an element has.
classList.add() newDiv.classList.add('text-box'); adds a class of text-box to an element
classList.remove() newDiv.classList.remove('text-box'); Removes a class of text-box from an element
classList.toggle() newDiv.classList.toggle('text-box'); Adds a class to an element if it doesn’t exist. Otherwise it removes it.
classList.contains() newDiv.classList.contains('text-box'); Checks whether an element contains the given class and returns a boolean.

Adding CSS to HTML elements’ style attribute

You can add a style attribute to any HTML element using .style as in:

const container = getElementById('container');
container.style.display = 'none';

To remove a style use empty quotes:

container.style.display = 'none';

To add multiple CSS properties use style.cssText.

div.style.cssText=`
    color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
`;

Note the use of backticks to allow multi-line use.

But according to javascript.info:

This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won’t delete an existing style.

javascript.info

Using setAttribute()

You can also set inline styles using the setAttribute() method. This can be used for other HTML attributes too but don’t use for event handlers ( onclick, onmousedown etc.).

div.setAttribute('style', 'color: red...')
  • This list has an id of item-list

using

itemList.innerHTML += '<li>new list item using innerHTML</li>';


const nuLi = document.createElement('li');

itemList.appendChild(nuLi);
let nuText = prompt('Say something for this new item');
nuLi.textContent = nuText;

this doesn’t work after add list item above

const first = itemList.firstElementChild;

const insertB4 = () => {
    const nuLi = document.createElement('li');
    nuLi.textContent = 'this is using insertBefore';
    alert('first line done');
    itemList.insertBefore(nuLi, first);
}

Table of Contents