Resumo : neste tutorial, você aprenderá como usar JavaScript document.createElement()
para criar um novo elemento HTML e anexá-lo à árvore DOM.
Para criar um elemento HTML, você usa o document.createElement()
método:
let element = document.createElement(htmlTag);
Linguagem de código: JavaScript ( javascript )
O document.createElement()
aceita um nome de tag HTML e retorna um novo Node
com o Element
tipo.
1) Criando um novo exemplo de div
Suponha que você tenha o seguinte documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
O exemplo a seguir usa o document.createElement()
para criar um novo <div>
elemento:
let div = document.createElement('div');
Linguagem de código: JavaScript ( javascript )
E adicione um snippet HTML ao div
:
div.innerHTML = '<p>CreateElement example</p>';
Linguagem de código: HTML, XML ( xml )
Para anexar div
ao documento, você usa o appendChild()
método:
document.body.appendChild(div);
Linguagem de código: CSS ( css )
Junte tudo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
<script>
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Adicionando um id à div
Se você quiser adicionar um id a a div
, você define o id
atributo do elemento como um valor, assim:
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);
Linguagem de código: JavaScript ( javascript )
Adicionando uma classe à div
O exemplo a seguir define a classe CSS de uma nova div note
:
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);
Linguagem de código: JavaScript ( javascript )
Adicionando texto a uma div
Para adicionar um pedaço de texto a um <div>
, você pode usar a innerHTML
propriedade como no exemplo acima ou criar um novo Text
nó e anexá-lo ao div
:
// create a new div and set its attributes
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
// create a new text node and add it to the div
let text = document.createTextNode('CreateElement example');
div.appendChild(text);
// add div to the document
document.body.appendChild(div);
Linguagem de código: JavaScript ( javascript )
Adicionando um elemento a uma div
Para adicionar um elemento a a div
, você cria um elemento e o anexa ao div
usando o appendChild()
método:
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
// create a new heading and add it to the div
let h2 = document.createElement('h2');
h2.textContent = 'Add h2 element to the div';
div.appendChild(h2);
// add div to the document
document.body.appendChild(div);
Linguagem de código: JavaScript ( javascript )
2) li
Exemplo de criação de novos itens de lista ( )
Digamos que você tenha uma lista de itens:
<ul id="menu">
<li>Home</li>
</ul>
Linguagem de código: HTML, XML ( xml )
O código a seguir adiciona dois li
elementos ao ul
:
let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li);
li = document.createElement('li');
li.textContent = 'About Us';
// select the ul menu element
const menu = document.querySelector('#menu');
menu.appendChild(li);
Linguagem de código: JavaScript ( javascript )
Saída:
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
</ul>
Linguagem de código: HTML, XML ( xml )
3) Criando um script
exemplo de elemento
Às vezes, você pode querer carregar um arquivo JavaScript dinamicamente. Para fazer isso, você pode usar document.createElement()
para criar o script
elemento e adicioná-lo ao documento.
O exemplo a seguir ilustra como criar um novo script
elemento e carregar o /lib.js
arquivo no documento:
let script = document.createElement('script');
script.src = '/lib.js';
document.body.appendChild(script);
Linguagem de código: JavaScript ( javascript )
Você pode primeiro criar uma nova função auxiliar que carrega um arquivo JavaScript de uma URL:
function loadJS(url) {
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
Linguagem de código: JavaScript ( javascript )
E então use a função auxiliar para carregar o /lib.js
arquivo:
loadJS('/lib.js');
Linguagem de código: JavaScript ( javascript )
Para carregar um arquivo JavaScript de forma assíncrona, você define o async
atributo do script
elemento como true
:
function loadJSAsync(url) {
let script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
}
Linguagem de código: JavaScript ( javascript )
Resumo
- Isso
document.createElement()
cria um novo elemento HTML. - Anexa
element.appendChild()
um elemento HTML a um elemento existente.