Create Page Elements with JavaScript
How to Create Page Elements and make them Interactive with Event LIsteners
There are several ways to create page elements with JavaScript, including:
Using the document.createElement() method, which creates a new element with the specified tag name. For example, the following code creates a new div element:
let newDiv = document.createElement(“div”);
Using the innerHTML property to add HTML content to an existing element. For example, the following code adds a new p element to an existing div element with an id of “container”:
let container = document.getElementById(“container”);
container.innerHTML += “<p>Hello World</p>”;
Using the appendChild() method to add a new element as a child of an existing element. For example, the following code adds a new p element as a child of an existing div element with an id of “container”:
let container = document.getElementById(“container”);
let newP = document.createElement(“p”);
newP.innerHTML = “Hello World”;
container.appendChild(newP);
Using the insertAdjacentHTML() method to insert HTML content at a specific position relative to an existing element. For example, the following code adds a new p element before an existing div element with an id of “container”:
let container = document.getElementById(“container”);
container.insertAdjacentHTML(“beforebegin”, “<p>Hello World</p>”);
You can also use any of the above methods to add CSS styles, classes and attributes to the newly created elements.
Coding Example of how to insert page content , html elements into your DOM page.
Coding Exercise to demo how to insert HTML page elements into the page with JavaScript
const ele1 = document.createElement(‘div’);
ele1.textContent = ‘My new element’;
document.body.prepend(ele1);
const output = document.querySelector(‘.output’);
output.innerHTML += ‘<div>Laurence</div>’;
output.innerHTML += ‘<div>Hello World</div>’;
output.style.border = ‘1px solid red’;
const ele2 = document.createElement(‘h2’);
ele2.innerHTML = ‘Laurence Svekis’;
const el = output.appendChild(ele2);
console.log(el);
const ele3 = document.createElement(‘h2’);
ele3.innerHTML = ‘Laurence Svekis’;
const el2 = output.append(ele3);
console.log(el2);
output.insertAdjacentHTML(‘beforebegin’,'<p>Para1</p>’);
output.insertAdjacentHTML(‘beforeend’,'<p>Para2</p>’);
output.insertAdjacentHTML(‘afterbegin’,'<p>Para3</p>’);
output.insertAdjacentHTML(‘afterend’,'<p>Para4</p>’);
const ele4 = document.createElement(‘h3’);
ele4.textContent = ‘Laurence Svekis’;
output.insertAdjacentElement(‘beforebegin’,ele4);
output.insertAdjacentText(‘beforeend’,’Hello World 4′);