English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML DOM permette a JavaScript di ottenere e modificare il contenuto degli elementi HTML.
Il modo più semplice per modificare il contenuto HTML è utilizzareinnerHTMLproprietà.
Per modificare il contenuto dell'elemento HTML, utilizzare la seguente sintassi:
element.innerHTML = text
Esempio di utilizzo seguenteid="para" cambiare<p>Il contenuto dell'elemento:
<!DOCTYPE html>
<html>
<p id="para"></p>
<script>
document.getElementById("para").innerHTML = "Hello world";
</script>
</html>Prova a vedere‹/›Ecco un esempioottenereid="para"con<p>Il contenuto dell'elemento:
<!DOCTYPE html>
<html>
<p id="para">Questo è un paragrafo.</p>
<p id="result"></p>
<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>
</html>Prova a vedere‹/›document.write()Il metodo scrive una stringa di testo nel flusso del documento.
<!DOCTYPE html> <html> <p>Il metodo document.write() scrive una stringa di testo nella corrente output stream del documento:</p> <script> document.write(new Date()); </script> </html>Prova a vedere‹/›
Questo metodo scrive il contenuto solo quando il documento viene解析.
Se si utilizza questo metodo dopo che la pagina è stata caricata, sovrascriverà tutto il contenuto esistente del documento.
<button onclick="myFunc()">Clicca su di me</button>
<script>
function myFunc() {
document.write(new Date());
}
</script>Prova a vedere‹/›Per cambiare il valore di un attributo HTML, usa la seguente sintassi:
element.attribute = new value
Ecco un esempiocambiare<img>dell'elementosrcvalore dell'attributo:
Ecco un esempiootteneredell'elemento di collegamentohrefvalore dell'attributo:
var x = document.getElementById("demo").href;Prova a vedere‹/›Puoi usaredocument.createElement()Il metodo crea esplicitamente nuovi elementi in un documento HTML.
Questo metodo crea un nuovo elemento ma non lo aggiunge al DOM. Devi eseguire questa operazione in un passaggio separato:
// Creare un nuovo elemento h3
var newElem = document.createElement("h3");
// E dargli un po' di contenuto
var newContent = document.createTextNode("Ciao, tutti!");appendChild()Il metodo aggiunge un nuovo elemento a qualsiasi altro sotto-elemento del nodo genitore specificatoalla fine.
// Aggiungi un nodo di testo al nuovo h3 creato newElem.appendChild(newContent); // Aggiungere l'elemento creato e il suo contenuto nel DOM document.body.appendChild(newElem);Prova a vedere‹/›
Ma, se si vuole aggiungere in qualsiasi altro sotto-elementoInizioSe aggiungi un nuovo elemento, puoi usare ilinsertBefore()Metodo.
// Crea un nuovo elemento h3
var newElem = document.createElement("h3");
// Dargli un po' di contenuto
var newContent = document.createTextNode("Hi there and greetings!");
// Aggiungi un nodo di testo al nuovo h3 creato
newElem.appendChild(newContent);
// Ottieni il Corpo
var body = document.body;
// Inserisci H3 prima del primo figlio del BODY
body.insertBefore(newElem, body.childNodes[0]);Prova a vedere‹/›Allo stesso modo, puoi usare ilremoveChild()Il metodo rimuove un sottoelemento dal DOM.
var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);Prova a vedere‹/›