JavaScript Create Interactive Elements within your Page
JavaScript Create Element List
The document.createElement() method in JavaScript is used to create a new HTML element with a specified tag name. The method takes a single argument, which is the tag name of the element to be created. For example, document.createElement("div") creates a new div element. The newly created element can be accessed and modified through the DOM API, such as adding content, attributes, and styles to the element. It can also be added to the document by using methods such as appendChild() or insertAdjacentHTML().
In the below example we will be creating a dynamic list, all the elements are created using JavaScript, adding the button for interaction when the user wants to add new people to the list.
How to Create Page Elements with JavaScript
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');
Create a list of items within a table using JavaScript.? Data is contained within an array with object values.
<!DOCTYPE html>
<html>
<head>
???<title>Learn JavaScript</title>
???<style>
???????table{
???????????width:100%;
领英推荐
???????}
???????td:first-child{
???????????width:10%;
???????}
???????td:last-child{
???????????width:10%;
???????}
???????td{
???????????border: 1px solid #ddd;
???????}
???</style>
</head>
<body>
???<h1>Learn JavaScript Course </h1>
???<div>
???????<input type="text" id="addFriend" >
???????<input type="button" id="addNew" value="Add New">
???????<div class="output"></div>
???</div>
???<script src="app10.js"></script>
</body>
</html>
const myArr = [
???{name:'Laurence',score:0,id:1} ,
???{name:'Susan',score:0,id:2} ,
???{name:'Lisa',score:0,id:3}
];
const output = document.querySelector('.output');
const btn = document.querySelector('#addNew');
const addFriend = document.querySelector('#addFriend');
const tblOutput = document.createElement('table');
output.append(tblOutput);
addFriend.value = 'Laurence';
build();
btn.addEventListener('click',()=>{
???const myObj = ? {name:addFriend.value,score:0,id:myArr.length+1} ;
???myArr.push(myObj );
???console.log(myArr);
???build();
})
function build(){
???tblOutput.innerHTML = '';
???myArr.forEach((ele,ind) =>{
???????const tr = document.createElement('tr');
???????tblOutput.append(tr);
???????const td1 = document.createElement('td');
???????td1.textContent = ele.id;
???????tr.append(td1);
???????const td2 = document.createElement('td');
???????td2.textContent = ele.name;
???????tr.append(td2);
???????const td3 = document.createElement('td');
???????td3.textContent = ele.score;
???????tr.append(td3);
???????tr.addEventListener('click',()=>{
???????????ele.score++;
???????????td3.textContent = ele.score;
???????})
???})
}