elementos DOM JavaScript HTML
Criar um novo elemento HTML
Criar um novo elemento HTML
Para adicionar um novo elemento ao DOM HTML, você deve primeiro criar o elemento (um nó de elemento), e em seguida, acrescentar o elemento a um elemento existente.Exemplos
<P id = "p1"> Este é um parágrafo. </ P>
<P id = "p2"> Este é outro parágrafo. </ P>
</ Div>
<Script>
var Pará = document.createElement ( "p");
nó var = document.createTextNode ( "Este é um novo parágrafo.");
para.appendChild (nó);
var element = document.getElementById ( "div1");
element.appendChild (para);
</ Script>
tente »
Exemplos de análise:
Este código cria um novo elemento <p>:
Para adicionar texto ao elemento <p>, você deve primeiro criar um nó de texto. Esse código cria um nó de texto:
Em seguida, você deve adicionar este nó de texto para o elemento <p>:
Finalmente, você deve adicionar este novo elemento para um elemento existente.
O código para encontrar um elemento existente:
O código a seguir após os elementos existentes adicionar um novo elemento:
Remover os elementos HTML existentes
O código a seguir demonstra como excluir elementos:
Exemplos
<P id = "p1"> Este é um parágrafo. </ P>
<P id = "p2"> Este é outro parágrafo. </ P>
</ Div>
<Script>
var parent = document.getElementById ( "div1");
var child = document.getElementById ( "P1");
parent.removeChild (criança);
</ Script>
tente »
Exemplos de analítico
O documento HTML contendo os nós filho tem dois (dois <p> elemento) do elemento <div>:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
Encontrar id = elementos "Div1":
Encontrar id = "p1" o elemento <p>:
Retire do sub-elemento elementos pai:
 | Se você pode remover um elemento sem uma referência para o elemento pai, seria ótimo. Mas, infelizmente. elementos DOM que você precisa saber para ser eliminado, assim como seu elemento pai. |
|---|
Esta é uma solução comum: encontrar o elemento filho que deseja excluir e, em seguida, usar suas propriedades para encontrar parentNode elemento pai:
child.parentNode.removeChild(child);
HTML DOM Tutorial
Na parte HTML DOM do nosso tutorial JavaScript, você aprendeu:
- Como alterar o conteúdo do elemento HTML (innerHTML)
- Como alterar o estilo de elementos HTML (CSS)
- Como reagir a eventos no DOM HTML
- Como faço para adicionar ou remover elementos HTML
Se você quiser saber mais sobre como usar o JavaScript para acessar o conhecimento de HTML DOM, visite o nosso completo tutorial HTML DOM .