Document Object Model (DOM) es una interfaz de plataforma e idioma neutral que utilizan los programas y scripts para acceder dinámicamente al contenido, el estilo y la estructura. Consulte DOM (Modelo de objeto de documento) para conocer los detalles. Podemos implementar esto usando los métodos createElement() , createTextNode() , appendChild() , replaceChild() y la propiedad childNodes de DOM .
Analicemos estos métodos y propiedades para reemplazar un elemento HTML por otro.
- createElement(): Se utiliza para crear un Node de elemento con el nombre especificado.
Sintaxis:var element = document.createElement("Element_name");En este ejemplo, el elemento es la etiqueta «h1», así que escribe
var element=document.createElement("h1"); - createTextNode(): El método se utiliza para crear un Node de texto.
Sintaxis:var txt = document.createTextNode("Some_Text"); - appendChild(): después de crear el Node de texto, tenemos que agregarlo al elemento usando el método appendChild() .
Sintaxis:
element.appendChild(Node_To_append);
A continuación, se muestra el código de trabajo sobre cómo usar estos métodos y propiedades discutidos anteriormente.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>
Using DOM'S to print Hello World
</h2>
<script>
var h = document.createElement("h3");
var txt = document
.createTextNode("Hello World!!");
h.appendChild(txt);
document.body.appendChild(h);
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
childNodes[Posición]: esta propiedad devuelve una colección de Nodes secundarios como un objeto NodeList. Los Nodes se ordenan tal como aparecen en el código fuente y se puede acceder a ellos por número de índice a partir de 0.
replaceChild(): reemplaza un Node secundario con un nuevo Node.
old_Node.replaceChild(new_Node, old_node.childNodes[node_position]);
Ejemplo: El siguiente código muestra cómo reemplazar un elemento por otro.
HTML
<!DOCTYPE html>
<html>
<body>
<div id="p1">
<p id="red">Hello World </p>
<!-- We are going to replace Hello World!!
in "p" tag with "Hello Geeks" in "h2"
tag-->
<button onclick="repFun()">
Click Me
</button>
</div>
<p id="demo"></p>
<script>
function repFun() {
// Creating "h2" element
var H = document.createElement("h2");
// Retaining id
H.setAttribute("id", "red");
// Creating Text node
var txt = document.createTextNode("Hello Geeks!!");
// Accessing the Element we want to replace
var repNode = document.getElementById("p1");
// Appending Text Node in Element
H.appendChild(txt);
// Replacing one element with another
p1.replaceChild(H, p1.childNodes[0]);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por mr_coder9933 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA