JavaScriptCreateElement – Acervo Lima Tutorials

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 Nodecom o Elementtipo.

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 divao 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 idatributo 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 innerHTMLpropriedade como no exemplo acima ou criar um novo Textnó 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 divusando 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 lielementos 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 scriptelemento e adicioná-lo ao documento.

O exemplo a seguir ilustra como criar um novo scriptelemento e carregar o /lib.jsarquivo 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.jsarquivo:

loadJS('/lib.js');Linguagem de código:  JavaScript  ( javascript )

Para carregar um arquivo JavaScript de forma assíncrona, você define o asyncatributo do scriptelemento 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.

Obtendo elementos filhos de um nó em JavaScript

JavaScript acrescentar Filho