<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Modificando HTML #01</title>
<link rel='stylesheet' href='css/estilo.css'>
</head>
<body class='conteudo exercicio'>
<script>
const body = document.querySelector('body')
const div1 = document.createElement('div')
div1.classList.add('destaque')
div1.innerHTML = 'Primeiro'
const div2 = document.createElement('div')
div2.setAttribute('wm-atributo', 'valor')
div2.innerHTML = 'Segundo'
const p = document.createElement('p')//fazendo um parágrafo
p.innerHTML = 'Terceiro'
const div3 = document.createElement('div');
div3.appendChild(p)//paragrafo dentro da função
//exibindo no navegador
body.appendChild(div1)
body.appendChild(div2)
body.appendChild(div3)
const texto = document.createTextNode('Antes...')
//div3 = elemento PAI, texto = elemento FILHO
div3.insertBefore(texto, div3.childNodes[0])//insere antes da posição 1
//Adicionando um clone
const div4 = div3.cloneNode(true)//clonou o elemento 3 e coloca na div4
body.appendChild(div4);//adiciona o elemento clonado
body.removeChild(div3);//revovendo a div3
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário