El método replaceWith() reemplaza un Node en la lista de hijos de su padre con un conjunto de objetos Node o DOMString . Los objetos DOMString son equivalentes a los Nodes de texto. Aquí, un elemento secundario se reemplaza por otro elemento secundario.
Sintaxis:
ChildNode.replaceWith(Node);
Parámetros:
- ChildNode: El ChildNode que se va a reemplazar.
- Node: el Node con el que se reemplaza ChildNode.
Valor de retorno: Sin valor de retorno.
Ejemplo:
En este ejemplo, reemplacé childNode llamado childPara (elemento <p>) con un Node llamado childDiv (elemento <div>) usando este método.
HTML
<!DOCTYPE html>
<html>
<head>
<title>replaceWith() method</title>
<script>
var parent = document.createElement("div");
parent.innerHTML = "Parent of the document";
var childPara = document.createElement("p");
childPara.innerHTML = "Child ParaGraph";
parent.appendChild(childPara);
console.log(parent.outerHTML);
var childDiv = document.createElement("div");
childDiv.innerHTML = "Child Div";
childPara.replaceWith(childDiv);
console.log(parent.outerHTML);
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
</body>
</html>
Producción:
En consola se puede ver:
- En la línea 12, antes de aplicar el método replaceWith(), el HTML externo del elemento principal tiene el elemento <p> como childNode.
- En la línea 16, después de aplicar este método, el elemento principal tiene un elemento <div> reemplazado como ChildNode.
Navegadores compatibles:
- Google Chrome 54 y superior
- Edge 17 y superior
- Firefox 49 y superior
- Internet Explorer no es compatible
- Ópera 39 y superior
- Safari 10 y superior