En este artículo, aprenderemos sobre el método appendChild() en HTML DOM en Javascript, y comprenderemos su implementación a través de los ejemplos.
El método appendChild() de la interfaz del Node se usa para crear un Node de texto como el último hijo del Node. Este método también se utiliza para mover un elemento de un elemento a otro elemento. Se usa para crear un nuevo elemento con algo de texto, luego primero crea el texto como el Node de texto y luego lo agrega al elemento, luego agrega el elemento al documento.
Sintaxis:
node.appendChild(node);
Parámetros: este método acepta un solo Node de parámetro que es obligatorio y se usa para especificar el objeto de Node que debe agregarse.
Usaremos el método document.createElement() que se usa para crear el elemento HTML, es decir, se creará el elemento especificado con elementName o se creará un elemento HTML desconocido si no se reconoce el elementName especificado. También usaremos el método createTextNode() para crear el TextNode que contendrá el Node del elemento y un Node de texto. Este método se utiliza para proporcionar texto a un elemento que contendrá los valores de texto como parámetros y es de tipo string. El método getElementById() devolverá los elementos que contienen el ID dado que se pasará a la función.
Ejemplo 1: este ejemplo describe el uso del método appendChild() que creará el Node de texto como el último hijo del Node.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM appendChild() Method</title>
<style>
h1,
h2 {
font-weight: bold;
color: green;
}
body {
margin-left: 130px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM appendChild() Method</h2>
<ul id="gfg">
<li>Computer Network</li>
<li>Data Structures using C</li>
</ul>
<button onclick="geeks()">Submit</button>
<script>
function geeks() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Web Technology");
node.appendChild(textnode);
document.getElementById("gfg").appendChild(node);
}
</script>
</body>
</html>
Producción:
Método appendChild() del DOM
Ejemplo 2: este ejemplo describe el uso del método appendChild() agregando el texto al documento después de hacer clic en el botón Enviar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM appendChild() Method</title>
<style>
#sudo {
border: 1px solid green;
background-color: green;
margin-bottom: 10px;
color: white;
font-weight: bold;
}
h1,
h2 {
text-align: center;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM appendChild() Method</h2>
<div id="sudo">
The Good Website is learning for Computer Science is-
</div>
<button onclick="geeks()">Submit</button>
<script>
function geeks() {
var node = document.createElement("P");
var t = document.createTextNode("GeeksforGeeks");
node.appendChild(t);
document.getElementById("sudo").appendChild(node);
}
</script>
</body>
</html>
Producción:
Método appendChild() del DOM
Navegadores compatibles: los navegadores compatibles con el método DOM appendChild() se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 5.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 5.0
- Safari 1.1
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA