Module 4: Creating HTML

document.createElement(tagName[, options]);

const myParagraph = document.createElement('p');
//we created it but it's only in memory. it won't show.

if you want to add attributes. Then
myParagraph.textContent = 'I am a P';
myParagraph.classList.add('special');

const myImage = document.createElement('img');

myImage.src = 'http://www.pics.jps'';
myImage.alt = 'Nice Photo';

const myDiv = document.createElement('div');
myDiv.classList.add('wrapper');

how do the add them to the page?

if you just want to dump it straight into the body
document.body.appendChild(aChild);
//method to add a Node to the end of the list

document.body.appendChild(myParagraph);

document.body.appendChild(myDiv);
myDiv.appendChild(myParagraph);
myDiv.appendChild(myImage);

It causes a repaint on the browser. You're triggering three sequential appendChild();
So what you can do instead:

myDiv.appendChild(myParagraph);
myDiv.appendChild(myImage);

and then

document.body.appendChild(myDiv);

That will just cause one.

append() another option.


const heading = document.createElement('h2');
heading.textContent = 'Cool things';

myDiv.appendChild(heading);
myDiv.insertAdjacentElement('afterbegin', heading);

const li1 = li5.cloneNode();
list.insertAdjacentElement('afterbegin', li1);
//

const li1 = li5.cloneNode(true);
li1.textContent = 'one';
list.insertAdjacentElement('afterbegin', li1);
//