Uda 2-3 Creating Content with JavaScript

createTextNode()

Creates a Text node Instead of creating a new text node and appending it to an element, it's faster and easier to just update the element's text with the .textContent property.

.textContent attribute

DOM attribute that sets or returns the textual content of the specified node, and all its descendants Passing text that contains HTML characters to .textContent will not display the content as HTML.

setAttribute()-2

You can use this method to set any attribute for an element. If you want to give an element an ID, you can do that!:

.style.cssText

mainHeading.style.cssText = 'color: blue; background-color: orange; font-size: 3.5em';

removeChild

removes a specified child node, returns the removed node as a node object <parent-element>.removeChild(<child-to-remove>);

insertAdjacentHTML()

the .insertAdjacentHTML() method's second argument has to be text, you can't pass an element The .insertAdjacentHTML() method has to be called with two arguments: the location of the HTML the HTML text that is going to be inserted. The first argument to this method will let us insert the new HTML in one of four different locations: beforebegin - inserts the HTML text as a previous sibling afterbegin - inserts the HTML text as the first child beforeend - inserts the HTML text as the last child afterend - inserts the HTML text as a following sibling

Every element has an .innerHTML property

* get an element's (and all of its descendants!) HTML content * set an element's HTML content

.innerText

.innerText will get the visible text of the element. This is an important distinction! If CSS is used to hide any text inside that element, .innerText will not return that text, while .textContent will return it.

.firstChild .firstElementChild .parentElement

The difference between .firstChild and .firstElementChild, is that .firstElementChild will always return the first element, while .firstChild might return whitespace (if there is any) to preserve the formatting of the underlying HTML source code.

.remove()

The difference is that with .removeChild() must be called on the parent of the element being removed and must be passed the child to be removed, while .remove() can be called directly on the element to delete.

.createElement()

What function would be used to make a new script element? (Don't include parentheses in your answer.) document.createElement('span');

appendChild

appends a node as the last child of a node. if an element already exists in the DOM and this element is passed to .appendChild(), the .appendChild() method will move it rather than duplicating it mainHeading.appendChild(newSpan);

.split()

const arrayOfClasses = listOfClasses.split(' '); // logs out the array of strings ["ank-student", "jpk-modal"] console.log(arrayOfClasses);

.classList Property

const listOfClasses = mainHeading.classList; // logs out ["ank-student", "jpk-modal"]

.className property

const mainHeading = document.querySelector('#main-heading'); // store the list of classes in a variable const listOfClasses = mainHeading.className; // logs out the string "ank-student jpk-modal"

setAttribute()

const mainHeading = document.querySelector('h1'); mainHeading.setAttribute('style', 'color: blue; background-color: orange; font-size: 3.5em;');

Style Property

const mainHeading = document.querySelector('h1'); mainHeading.style.color = 'red';