Latest web development tutorials
×

JavaScript curso

JavaScript curso JavaScript breve introducción JavaScript uso JavaScript exportación JavaScript gramática JavaScript declaraciones JavaScript nota JavaScript variable JavaScript Tipos de datos JavaScript objetos JavaScript función JavaScript alcance JavaScript evento JavaScript cadena JavaScript operadores JavaScript comparar JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript tipo de conversión JavaScript Las expresiones regulares JavaScript error JavaScript depuración JavaScript variable de elevación JavaScript Modo estricto JavaScript El uso inapropiado JavaScript autenticación de formularios JavaScript Palabras clave reservadas JavaScript JSON JavaScript void JavaScript Especificación código

JS función

JavaScript definición de la función JavaScript Argumentos de función JavaScript llamada a la función JavaScript Los cierres

JS HTML DOM

DOM breve introducción DOM HTML DOM CSS DOM evento DOM EventListener DOM elemento

JS Tutorial avanzado

JavaScript objetos JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp objetos

JS navegador BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript música pop JavaScript Evento cronometrado JavaScript Cookies

JS almacén

JavaScript almacén JavaScript prueba jQuery JavaScript prueba Prototype

JS Ejemplos

JavaScript Ejemplos JavaScript instancia de objeto JavaScript instancia de objeto del navegador JavaScript HTML DOM Ejemplos JavaScript resumen

JS Manual de referencia

JavaScript objetos HTML DOM objetos

elementos DOM JavaScript HTML

Crear un nuevo elemento HTML

Crear un nuevo elemento HTML

Para añadir un nuevo elemento a la DOM HTML, primero debe crear el elemento (un nodo elemento), y luego añadir el elemento a un elemento existente.

Ejemplos

<Div id = "div1">
<P id = "p1"> Esto es un párrafo. </ P>
<P id = "p2"> Este es otro párrafo. </ P>
</ Div>

<Script>
var = document.createElement párrafo ( "p");
nodo var = document.createTextNode ( "Este es un párrafo nuevo.");
para.appendChild (nodo);

var element = document.getElementById ( "div1");
element.appendChild (para);
</ Script>

Trate »

Ejemplos de análisis:

Este código crea un nuevo elemento <p>:

var para=document.createElement("p");

Para añadir texto al elemento <p>, primero debe crear un nodo de texto. Este código crea un nodo de texto:

nodo var = document.createTextNode ( "Este es un párrafo nuevo.");

A continuación, debe agregar este nodo de texto para el elemento <p>:

para.appendChild (nodo);

Por último, debe agregar este nuevo elemento a un elemento existente.

El código para encontrar un elemento existente:

var element = document.getElementById ( "div1");

El código siguiente después de los elementos existentes añadir un nuevo elemento:

element.appendChild (para);

Quitar los elementos HTML existentes

El código siguiente muestra cómo eliminar elementos:

Ejemplos

<Div id = "div1">
<P id = "p1"> Esto es un párrafo. </ P>
<P id = "p2"> Este es otro párrafo. </ P>
</ Div>

<Script>
var matriz = document.getElementById ( "div1");
var niño = document.getElementById ( "P1");
parent.removeChild (niño);
</ Script>


Trate »

Ejemplos de analítica

El documento HTML que contiene los nodos hijos tienen (dos elemento <p>) dos de los elementos <div>:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Encuentra id = "elementos" Div1:

var matriz = document.getElementById ( "div1");

Encuentra Identificación del elemento <P> = "p1":

var child=document.getElementById("p1");

Retirar del elemento padre sub-elementos:

parent.removeChild(child);

lámpara Si se puede quitar un elemento sin una referencia al elemento padre, que sería grande.
Pero, por desgracia. elementos DOM que usted necesita saber para ser eliminados, así como su elemento padre.

Esta es una solución común: encontrar el elemento secundario que desea borrar, y luego usar sus propiedades para encontrar parentNode elemento padre:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

DOM HTML Tutorial

En la parte HTML DOM de nuestro tutorial JavaScript, que ha aprendido:

  • Cómo cambiar el contenido del elemento HTML (innerHTML)
  • Cómo cambiar el estilo de los elementos HTML (CSS)
  • Cómo reaccionar a los eventos en el DOM HTML
  • ¿Cómo puedo añadir o eliminar elementos HTML

Si desea obtener más información sobre el uso de JavaScript para acceder al conocimiento de HTML DOM, por favor visite nuestro completo tutorial HTML DOM .