Los nuevos elementos se pueden crear dinámicamente en JavaScript con la ayuda del método createElement() . Los atributos del elemento creado se pueden establecer mediante el método setAttribute() . Los ejemplos dados a continuación demostrarían este enfoque.
Ejemplo 1: en este ejemplo, un elemento recién creado se agrega como elemento secundario al elemento principal. Se especifica el tipo del elemento a crear y se agrega su valor o Node de texto para el elemento especificado.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
How to dynamically create
new elements in JavaScript?
</title>
</head>
<body>
<h1 style="text-align:center; color:green;">
GeeksForGeeks
</h1>
<!-- Form to add item -->
<form action="#" style="text-align:center;">
<!-- Type of Element -->
<label for="type">
Add Element Type
</label>
<input type="text" id="type"
placeholder="Like: div, h1, li...."
value="li" />
<br /><br />
<!-- Text/Value for the element --->
<label for="value">
Add Element Value
</label>
<input type="text" id="value"
placeholder="Like: Hello GeeksForGeeks"
value="CHILD 2" />
<br /><br />
<!-- Submit the Form -->
<button type="button"
onClick="addItem()">
Add
</button>
</form>
<!-- Parent tag where we add
item as child -->
<ol id="parent">
<li>List Item 1</li>
</ol>
<script>
// Define the addItem() function
// to be called through onclick
function addItem() {
// Get type of element from form
let type = document.
getElementById("type").value;
// Get the text/value for the tag
// from the form
let value = document.
getElementById("value").value;
// createElement() is used for
// creating a new element
type
= document.createElement(type);
// Use value as textnode in this example
type.appendChild(
document.createTextNode(value));
// Append as child to the parent
// tag i.e. ol
document.getElementById(
"parent").appendChild(type);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: en este ejemplo, se agrega un elemento recién creado junto con sus atributos al elemento del cuerpo de la página. Los atributos solo se pueden ingresar usando dos argumentos, es decir, el tipo de atributo y el valor del atributo. El CSS para el elemento «secundario» se agrega por conveniencia.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to dynamically create
new elements in JavaScript?
</title>
<style>
/* CSS for child item */
.child {
color: white;
background-color: green;
}
</style>
</head>
<body id="body">
<h1 style="text-align:center; color:green;">
GeeksForGeeks
</h1>
<!-- Form to add item -->
<form action="#" style="text-align: center;">
<!-- Type of element -->
<label for="type">
Add Element Type
</label>
<input type="text" id="type"
placeholder="Like: div, h1, li...."
value="h3" />
<br /><br />
<!-- Text/value for element --->
<label for="value"> Add Element Value</label>
<input type="text" id="value"
placeholder="Like: Hello GeeksForGeeks"
value="Hello GeeksForGeeks" />
<br /><br />
<!-- Add attributes for element --->
<label for="attr"> Add Attributes</label>
<form id="attr">
<label for="attrType">Add Attribute Type</label>
<input type="text" style="width:240px;"
placeholder="forexample: enter
'class' without quotes"
id="attrType"
value="class" />
<br />
<br />
<label for="attrValue">
Add Attribute Value
</label>
<input style="width:240px;" type="text"
placeholder="for example: enter
'child' without quotes"
id="attrValue" value="child" />
</form>
<br /><br />
<!-- Submit the form -->
<button type="button" onClick="addItem()">
Add
</button>
</form>
<div>
<p>CHILD 1</p>
</div>
<script>
// Define the addItem function
// to be called through onclick()
function addItem() {
// Get Elements by id of the form inputs
let parent =
document.getElementById("body");
let attrType =
document.getElementById("attrType");
let attrValue =
document.getElementById("attrValue");
let type = document.getElementById("type");
let value = document.getElementById("value");
if (type.value == "" || value.value == "") {
window.alert(
"There is an error in form input");
window.reload();
}
// createElement() method is used
// to create a new element
type = document.createElement(type.value);
// Append a text node for this example
type.appendChild(
document.createTextNode(value.value));
if (attrValue.value == ""
|| attrType.value == "") {
attr = null;
}
else {
// setAttribute() is used to set
// the attributes of the element
type.setAttribute(
attrType.value, attrValue.value);
}
// Append as child to the parent
// i.e. body
parent.appendChild(type);
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
