Resumo : neste tutorial, você aprenderá como usar o cloneNode()método JavaScript para clonar um elemento.
O cloneNode()é um método da Nodeinterface que permite clonar um elemento:
let clonedNode = originalNode.cloneNode(deep);Linguagem de código: JavaScript ( javascript )Pamaraters
deep
O cloneNode()método aceita um parâmetro opcional deep:
- Se
deepfortrue, então o nó original e todos os seus descendentes serão clonados. - Se
deepforfalse, apenas o nó original será clonado. Todos os descendentes do nó não serão clonados.
O deepparâmetro será padronizado falsese você o omitir.
originalNode
O originalNodeé o elemento a ser clonado.
Valor de retorno
O cloneNode()retorna uma cópia do arquivo originalNode.
Notas de uso
Além da estrutura DOM, cloneNode()copia todos os atributos e ouvintes embutidos do nó original. No entanto, ele não copia os ouvintes de eventos adicionados addEventListener()ou atribuídos às propriedades do elemento, como originalNode.onclick = eventHandler().
Se você clonar um nó com um idatributo e colocar o nó clonado no mesmo documento, ele idserá duplicado. Neste caso, você precisa alterar idantes de adicioná-lo à árvore DOM.
cloneNode()Exemplo de JavaScript
O exemplo a seguir usa o cloneNode()método para copiar o <ul>elemento e colocá-lo no mesmo documento:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript cloneNode() Demo</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
let menu = document.querySelector('#menu');
let clonedMenu = menu.cloneNode(true);
clonedMenu.id = 'menu-mobile';
document.body.appendChild(clonedMenu);
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )Como funciona.
- Primeiro, selecione o
<ul>menu com o id usando oquerySelector()método. - Segundo, crie um clone profundo do
<ul>elemento usando ocloneNode()método. - Terceiro, altere o
idelemento clonado para evitar duplicação. - Finalmente, anexe o elemento clonado aos nós filhos do
document.bodymétodoappendChild().
Saída:
Resumo
- Use o
node.cloneNode()método para clonar o nó. - Passe
truepara ocloneNode()método para criar um clone profundo de um elemento DOM.
