Latest web development tutorials
×

JavaScript corso

JavaScript corso JavaScript breve introduzione JavaScript uso JavaScript esportazione JavaScript grammatica JavaScript dichiarazioni JavaScript nota JavaScript variabile JavaScript Tipi di dati JavaScript Oggetti JavaScript funzione JavaScript portata JavaScript evento JavaScript stringa JavaScript operatori JavaScript confrontare JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript tipo di conversione JavaScript Espressioni regolari JavaScript errore JavaScript Debugging JavaScript alzata variabile JavaScript Modalità Strict JavaScript Uso improprio JavaScript Forms Authentication JavaScript Parole chiave riservate JavaScript JSON JavaScript void JavaScript Codice Specifica

JS funzione

JavaScript definizione di funzione JavaScript Argomenti funzione JavaScript richiamo della funzione JavaScript chiusure

JS HTML DOM

DOM breve introduzione DOM HTML DOM CSS DOM evento DOM EventListener DOM elemento

JS Tutorial avanzato

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

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript pop JavaScript evento programmato JavaScript Cookies

JS magazzino

JavaScript magazzino JavaScript prova jQuery JavaScript prova Prototype

JS Esempi

JavaScript Esempi JavaScript istanza di oggetto JavaScript istanza di oggetto Browser JavaScript HTML DOM Esempi JavaScript sommario

JS Manuale di riferimento

JavaScript Oggetti HTML DOM Oggetti

elementi DOM JavaScript HTML

Creare un nuovo elemento HTML

Creare un nuovo elemento HTML

Per aggiungere un nuovo elemento al DOM HTML, è necessario creare l'elemento (un nodo di elemento), e quindi aggiungere l'elemento ad un elemento esistente.

Esempi

<Div id = "div1">
<P id = "p1"> Questo è un paragrafo. </ P>
<P id = "p2"> Questo è un altro punto. </ P>
</ Div>

<Script>
var para = document.createElement ( "p");
nodo var = document.createTextNode ( "Questo è un nuovo paragrafo.");
para.appendChild (nodo);

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

Prova »

Esempi di analisi:

Questo codice crea un nuovo elemento <p>:

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

Per aggiungere testo all'elemento <p>, è necessario innanzitutto creare un nodo di testo. Questo codice crea un nodo di testo:

nodo var = document.createTextNode ( "Questo è un nuovo paragrafo.");

Quindi è necessario aggiungere questo nodo di testo per l'elemento <p>:

para.appendChild (nodo);

Infine, è necessario aggiungere questo nuovo elemento per un elemento esistente.

Il codice per trovare un elemento esistente:

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

Il seguente codice dopo gli elementi esistenti aggiungere un nuovo elemento:

element.appendChild (para);

Rimuovere gli elementi HTML esistenti

Il codice seguente illustra come eliminare gli elementi:

Esempi

<Div id = "div1">
<P id = "p1"> Questo è un paragrafo. </ P>
<P id = "p2"> Questo è un altro punto. </ P>
</ Div>

<Script>
var parent = document.getElementById ( "div1");
var bambino = document.getElementById ( "P1");
parent.removeChild (bambino);
</ Script>


Prova »

Esempi di analitica

Il documento HTML che contiene i nodi figlio hanno due (due <p> elemento) dell'elemento <div>:

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

Trova id = elementi "div1":

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

Trova id = del <p> elemento "P1":

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

Togliere dal sotto-elementi elemento genitore:

parent.removeChild(child);

lampada Se è possibile rimuovere un elemento senza un riferimento all'elemento genitore, sarebbe bello.
Ma purtroppo. elementi DOM che è necessario sapere per essere cancellato, così come suo elemento genitore.

Si tratta di una soluzione comune: trovare l'elemento figlio che si desidera eliminare, e quindi utilizzare le sue proprietà per trovare parentNode elemento padre:

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

HTML DOM Tutorial

Nella parte HTML DOM del nostro tutorial JavaScript, avete imparato:

  • Come cambiare il contenuto dell'elemento HTML (innerHTML)
  • Come cambiare lo stile di elementi HTML (CSS)
  • Come reagire agli eventi sul DOM HTML
  • Come faccio ad aggiungere o rimuovere elementi HTML

Se volete saperne di più su come utilizzare JavaScript per accedere alla conoscenza HTML DOM, si prega di visitare il nostro completo tutorial di HTML DOM .