El método extractContents() mueve el contenido del rango del árbol del documento a una variable de objeto de documento . El contenido del rango se elimina del árbol del documento.
El método extractContents() es similar al método cloneContents() . El método extractContents() crea un objeto DocumentFragment a partir del contenido de un objeto Range y elimina el contenido del Range del árbol del documento.
Sintaxis:
documentFragment = range.extractContents();
Parámetros: este método no acepta ningún parámetro.
Valor devuelto: este método devuelve un objeto DocumentFragment creado a partir del contenido del Rango.
Ejemplo: este ejemplo muestra cómo crear un objeto DocumentFragment y adjuntarlo a un elemento usando este método.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM range extractContents() method
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>RANGE CONTENT</p>
<button onclick="extract()">
Click to Extract the Range
</button>
<h1 id="element">
Below is extracted range:
</h1>
<script>
var range = document.createRange();
range.selectNode(document
.getElementsByTagName("p").item(0));
const element =
document.getElementById('element');
function extract() {
var documentFragment =
range.extractContents();
console.log(documentFragment);
element.appendChild(documentFragment);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Firefox 1 y superior
- Safari 1 y superior
- Ópera 9 y superior
- Internet Explorer 9 y superior