El cloneContents() devuelve un objeto DocumentFragment copiando los Nodes y Contenidos incluidos en el Rango. Todo el contenido del rango se puede clonar en un objeto DocumentFragment.
El método cloneContents() es similar al método extractContents() pero el método extractContents() copia el contenido en una variable de objeto y elimina el contenido del rango del árbol DOM, mientras que el método cloneContents() copia el contenido en una variable de objeto pero no elimina el rango contenido del árbol DOM.
Sintaxis:
documentFragment = range.cloneContents();
Parámetros: Este método no toma 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 al documento usando este método.
HTML
<html>
<head>
<title>HTML DOM range cloneContents() method</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>This is the Range Content</p>
<button onclick="clone()">Click To Clone Contents</button>
</body>
<script>
let range = document.createRange();
let referenceNode = document.getElementsByTagName('p').item(0);
range.selectNode(referenceNode);
function clone(){
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
console.log(documentFragment)
}
</script>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles:
- Google cromo 1
- Borde 12
- Firefox 1
- Safari 1
- Ópera 9
- explorador de Internet 9