Questa è la quarta parte dei post dedicati agli equivalenti nativi dei metodi jQuery. Potresti voler leggere e prima di continuare.

In questo articolo esamineremo i modi per creare, inserire, spostare ed eliminare elementi. Sebbene jQuery contenga già un gran numero di metodi utili, sarai sorpreso di apprendere che tutto ciò può essere fatto facilmente utilizzando metodi nativi.

Manipolazione del codice HTML degli elementi jQuery // get var html = $(elem).html(); // imposta $(elem).html("Nuovo html"); JS nativo // ottieni var html = elem.innerHTML; // imposta elem.innerHTML = "Nuovo html"; Manipolazione del testo dell'elemento jQuery // ottiene var text = $(elem).text(); // imposta $(elem).text("Nuovo testo"); JS nativo // ottieni var text = elem.textContent; // imposta elem.textContent = "Nuovo testo"; Creazione di un elemento jQuery $(""); Documento JS nativo.createElement("div"); Aggiunge il contenuto alla fine degli elementi jQuery $(parentNode).append(newNode); ParentNode.appendChild nativo JS(newNode); Aggiunge contenuto all'inizio degli elementi jQuery $(referenceNode).prepend(newNode); Riferimento JS nativoNode.insertBefore(newNode, referenceNode.firstElementChild); // o referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Inserisci direttamente prima di un elemento jQuery $(referenceNode).before(newNode); ReferenceNode JS nativo.parentNode.insertBefore(newNode, referenceNode); // o referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Inserisci direttamente dopo un elemento jQuery $(referenceNode).after(newNode); Riferimento JS nativoNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // o referenceNode.insertAdjacentElement("afterend", newNode); // FF48.0+, IE8+

Nota: 'beforebegin' e 'afterend' funzioneranno solo quando referenceNode si trova nell'albero DOM e ha un elemento genitore.

Guarda quanto segue:

ReferenceNode.insertAdjacentElement(posizione, nodo);

Il metodo insertAdjacentElement accetta due parametri:

• position - posizione relativa a referenceNode , deve essere uno dei seguenti:
  • 'beforebegin' - Prima dell'elemento stesso.
  • 'afterbegin' - All'interno dell'elemento, prima del primo figlio.
  • 'beforeend' - All'interno dell'elemento, dopo l'ultimo figlio.
  • 'afterend' - Dopo l'elemento stesso.
• nodo - nodo da inserire

contenuto del testo

Del testo Del testo var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("prima della fine", elem2); // risultato Un po' di testoUn po' di testo

Il metodo insertAdjacentElement è più pulito e intuitivo rispetto al metodo insertBefore, ma quest'ultimo è supportato meglio nei browser meno recenti.

Aggiunta di elementi più volte

Vale anche la pena notare che l'aggiunta di un elemento a un nodo che si trova nell'albero del DOM risulterà in un ridisegno. Questo non è molto buono, perché il browser deve ricalcolare la dimensione e la posizione del nuovo elemento, che cambierà anche i figli, gli antenati e gli elementi che appaiono dopo di esso nel DOM. Se stai aggiungendo molti elementi al DOM, l'operazione potrebbe richiedere del tempo.

Per evitare ciò, puoi aggiungere con DocumentFragment. Un frammento di documento è un oggetto documento che esiste solo in memoria, pertanto l'aggiunta ad esso non causerà alcun ridisposizione.

Diciamo che dobbiamo aggiungere 100 elementi li a un elemento ul presente nell'albero DOM:

// Ottieni l'elemento che conterrà i nostri articoli var ul = document.querySelector("ul"); // crea 100 elementi della lista per (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Nell'esempio sopra, gli elementi li vengono aggiunti direttamente all'elemento ul, che si trova nell'albero del DOM, causando quindi un ridisegno ad ogni iterazione: ovvero 100 modifiche!

Troviamo il modo migliore.

// Ottieni l'elemento che conterrà i nostri articoli var ul = document.querySelector("ul"); // crea un frammento di documento per aggiungere gli elementi dell'elenco a var docFrag = document.createDocumentFragment(); // crea 100 elementi della lista per (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

Nello stesso esempio, gli elementi li vengono aggiunti al frammento del documento in memoria, in modo che il reflow si attivi quando il frammento viene aggiunto all'elemento ul. Questo metodo ridurrà il numero di ridisegnazioni da 100 a 1.

Rimozione di un elemento jQuery $(referenceNode).remove(); Riferimento JS nativoNode.parentNode.removeChild(referenceNode); // o referenceNode.remove(); // FF 23.0+, 23.0+, Edge (nessun supporto IE)

In questo post voglio dirti come aggiungere o rimuovere un elemento da un oggetto in JavaScript. È molto semplice, ma molti principianti, come me prima, spesso si sentono confusi da questo.

Crea un oggetto di esempio var obj = ( name: "alex", last_name: "petrov", website: "site", );

Abbiamo un oggetto semplice, all'interno del quale sono presenti dati come name (nome), last_name (cognome) e website (sito web). I dati possono essere assolutamente qualsiasi cosa, ma ai fini di questo record sarà proprio quello.

Aggiunta di un nuovo elemento obj.country = "ru"; // aggiunge una nuova chiave "paese" all'oggetto con il valore "ru" obj["città"] = "Mosca"; // aggiungerà anche una nuova chiave, solo "città" con il valore "Mosca"

Il codice sopra è chiaro, ma tanto per essere chiari, puoi aggiungere nuovi valori a un oggetto nella sintassi dell'oggetto usando "." e una chiave o il solito formato array. Se lo dichiari come array, obj è ancora un oggetto, poiché in precedenza lo hai designato in questo modo grazie a () .

Crea oggetto all'interno dell'oggetto obj.other_obj = (); // crea un nuovo valore other_obj in obj e trasformalo in un oggetto

Ora aggiungiamo alcuni dati lì:

Obj.other_obj.first = "prima chiave del nuovo oggetto"; oggetto.altro_oggetto.secondo = "secondo";

Abbiamo creato due nuovi valori first e second all'interno di other_obj .

Eliminando un elemento delete obj.name; // restituisce vero

Puoi usare delete , che può rimuovere elementi dagli oggetti. Non puoi eliminare l'intero oggetto in questo modo, ma se ne hai bisogno, puoi farlo:

oggetto = (); // Rendi nuovamente vuoto l'oggetto

Questo è tutto, se hai ancora domande sugli oggetti in JavaScript, scrivi un commento qui sotto, cercherò di aiutarti.

Ultimo aggiornamento: 1.11.2015

L'oggetto documento dispone dei seguenti metodi per creare elementi:

createElement(elementName): crea un elemento html il cui tag viene passato come parametro. Restituisce l'elemento creato

createTextNode(text): crea e restituisce un nodo di testo. Il testo del nodo viene passato come parametro.

varelem = document.createElement("div"); var elemText = document.createTextNode("Ciao mondo");

Quindi la variabile elem memorizzerà un riferimento all'elemento div. Tuttavia, la semplice creazione di elementi non è sufficiente, è comunque necessario aggiungerli alla pagina web.

Per aggiungere elementi possiamo utilizzare uno dei metodi dell'oggetto Node:

appendChild(newNode): aggiunge un nuovo nodo newNode alla fine della raccolta di nodi figlio

insertBefore(newNode, referenceNode): inserisce un nuovo nodo newNode prima del referenceNode

Usiamo il metodo appendChild:

Titolo dell'articolo

Primo paragrafo

Secondo paragrafo

var articoloDiv = document.querySelector("div.articolo"); // crea l'elemento var elem = document.creaElement("h2"); // crea il testo var elemText = document.createTextNode("Hello World"); // aggiunge testo all'elemento come figlio elem.appendChild(elemText); // aggiunge un elemento al div articleDiv.appendChild(elem);

Per prima cosa creiamo un elemento di intestazione h2 regolare e un nodo di testo. Il nodo di testo viene quindi aggiunto all'elemento di intestazione. Quindi aggiungiamo il titolo a uno degli elementi della pagina web:

Tuttavia, non abbiamo bisogno di creare un nodo testo aggiuntivo per definire il testo all'interno dell'elemento, poiché possiamo utilizzare la proprietà textContent e assegnarle direttamente il testo:

Varelem = document.createElement("h2"); elem.textContent = "Ciao mondo";

In questo caso il nodo testo verrà creato implicitamente durante l'impostazione del testo.

Consideriamo ora come aggiungere un elemento simile all'inizio della raccolta di nodi figli del blocco div:

Var articoloDiv = document.querySelector("div.article"); // crea l'elemento var elem = document.creaElement("h2"); // crea il testo var elemText = document.createTextNode("Hello world"); // aggiunge testo all'elemento come figlio elem.appendChild(elemText); // ottiene il primo elemento da aggiungere prima di var firstElem = articleDiv.firstChild.nextSibling; // aggiunge un elemento al div prima del primo nodo articleDiv.insertBefore(elem, firstElem);

Se dobbiamo inserire un nuovo nodo nel secondo, terzo o in qualsiasi altro posto, allora dobbiamo trovare il nodo prima del quale vogliamo inserirlo, utilizzando una combinazione delle proprietà firstChild/lastChild e nextSibling/previousSibling.

Copiare un elemento

A volte gli elementi hanno una composizione piuttosto complessa ed è molto più semplice copiarli che creare contenuti da chiamate separate. Per copiare i nodi esistenti da un oggetto Node, puoi utilizzare il metodo cloneNode():

Var articoloDiv = document.querySelector("div.article"); // clona l'elemento articleDiv var newArticleDiv = articleDiv.cloneNode(true); // aggiungi alla fine dell'elemento body document.body.appendChild(newArticleDiv);

Un valore booleano viene passato al metodo cloneNode() come parametro: se viene passato true, l'elemento verrà copiato con tutti i nodi figli; se viene passato false, viene copiato senza nodi figlio. Cioè in questo caso copiamo il nodo con tutto il suo contenuto e poi lo aggiungiamo alla fine dell'elemento body.

Rimozione di un elemento

Per rimuovere un elemento viene chiamato il metodoremoveChild() dell'oggetto Node. Questo metodo rimuove uno dei nodi figlio:

Var articoloDiv = document.querySelector("div.article"); // trova il nodo da rimuovere - il primo paragrafo var smontabileNode = document.querySelectorAll("div.article p"); // rimuove il nodo articleDiv.removeChild(removableNode);

In questo caso, il primo paragrafo viene rimosso dal blocco div.

Sostituzione di un elemento

Per sostituire un elemento, utilizzare il metodo replaceChild(newNode, oldNode) dell'oggetto Node. Questo metodo accetta un nuovo elemento come primo parametro, che sostituisce il vecchio elemento oldNode passato come secondo parametro.

Var articoloDiv = document.querySelector("div.article"); // trova il nodo da sostituire: il primo paragrafo var oldNode = document.querySelectorAll("div.article p"); // crea l'elemento var newNode = document.creaElement("h2"); // crea il testo var elemText = document.createTextNode("Hello world"); // aggiunge testo all'elemento come figlio newNode.appendChild(elemText); // sostituisce il vecchio nodo con quello nuovo articleDiv.replaceChild(newNode, oldNode);

In questo caso sostituire il primo paragrafo con la voce h2.

In questa lezione impareremo come creare nodi di elementi (createElement) e nodi di testo (createTextNode). E considera anche i metodi per aggiungere nodi all'albero (appendChild, insertBefore) e per rimuovere nodi dall'albero (removeChild).

Aggiunta di nodi all'albero

L'aggiunta di un nuovo nodo ad un albero viene solitamente eseguita in 2 passaggi:

Crea il nodo richiesto utilizzando uno dei seguenti metodi:

• createElement() - crea un elemento (nodo) con il nome specificato (tag). Il metodo createElement(element) ha un parametro obbligatorio (elemento), che è una stringa contenente il nome dell'elemento (tag) da creare. Il nome dell'elemento (tag) nel parametro deve essere specificato in lettere maiuscole. Di conseguenza, questo metodo restituisce l'elemento creato.
• createTextNode(): crea un nodo di testo con il testo specificato. Il metodo createTextNode(text) ha un parametro obbligatorio (testo) che è una stringa contenente il testo del nodo di testo. Di conseguenza, questo metodo restituisce il nodo di testo creato.

Specificare la posizione nell'albero in cui si desidera inserire il nodo. A tale scopo, utilizzare uno dei seguenti metodi:

• appendChild() - Aggiunge un nodo come ultimo nodo figlio dell'elemento su cui viene chiamato questo metodo. Il metodo appendChild(node) ha un parametro obbligatorio, il nodo che desideri aggiungere. Di conseguenza, questo metodo restituisce il nodo aggiunto.
• insertBefore() - Inserisce un nodo come nodo figlio dell'elemento su cui viene chiamato questo metodo. Il metodo insertBefore(newNode,existingNode) ha due parametri: newNode (obbligatorio) - il nodo che desideri aggiungere, esistenteNode (facoltativo) - il nodo figlio dell'elemento prima del quale desideri inserire il nodo. Se il secondo parametro (existingNode) non è specificato, questo metodo lo inserirà alla fine, ad es. come ultimo nodo figlio dell'elemento su cui viene chiamato questo metodo. Il metodo insertBefore() restituisce come risultato il nodo inserito.

Per esempio:

• Computer
• Computer portatile
• Tavoletta

Diamo un'occhiata ad un esempio più complesso in cui aggiungiamo un nodo LI all'albero contenente un nodo di testo con il testo "Smartphone" alla fine dell'elenco ul.

Per fare ciò, procedi come segue:

Crea elemento (nodo) LI .

Crea un nodo di testo contenente il testo "Smartphone".

Aggiungi il nodo di testo appena creato come ultimo nodo figlio dell'elemento LI appena creato

Aggiungi il nodo LI appena creato come ultimo nodo figlio dell'elemento ul

//crea elemento (nodo) li var elementLI = document.createElement("li"); //crea un nodo di testo contenente il testo "Smartphone" var textSmart= document.createTextNode("Smartphone"); //aggiunge il nodo di testo creato come ultimo figlio dell'elemento LI appena creato elementLI.appendChild(textSmart); //ottiene l'elemento a cui il nodo li creato verrà aggiunto come figlio var elementUL = document.getElementById("list"); //aggiunge l'elemento li creato come ultimo elemento figlio all'UL con id="list" elementUL.appendChild(elementLI);

metodi appendChild() e insertBefore() quando si lavora con nodi esistenti

Anche il lavoro con i nodi esistenti utilizzando i metodi appendChild() e insertBefore() viene eseguito in 2 fasi:

Ottieni un nodo esistente nell'albero.

Specificare dove inserire il nodo utilizzando il metodo appendChild() o insertBefore(). Ciò rimuoverà il nodo dalla sua posizione precedente.

Ad esempio, aggiungi un elemento li esistente contenente il testo "Tablet" in cima all'elenco (questo lo rimuoverà dalla sua posizione precedente):

//ottiene l'elemento UL contenente l'elenco tramite il suo ID var elementUL = document.getElementById("list"); //ottiene l'elemento li contenente il nodo di testo "Tablet" var elementLI = elementUL.childNodes; //aggiunge l'elemento all'inizio dell'elenco //questo lo rimuoverà dalla sua posizione originale elementUL.insertBefore(elementLI,elementUL.firstChild);

Esercizio

• Nel documento sono presenti due elenchi. È necessario spostare gli elementi dal secondo elenco al primo.
• Crea un elenco, un campo di testo e 2 pulsanti. Scrivi il codice JavaScript che, a seconda del pulsante premuto, aggiunge il testo nel campo di testo all'inizio o alla fine dell'elenco.

Rimozione dei nodi

La rimozione di un nodo dall'albero viene eseguita in 2 fasi:

Ottieni (trova) questo nodo nell'albero. Questa azione viene in genere eseguita da uno dei seguenti metodi: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() o querySelectorAll() .

Chiama il metodoremoveChild() sul nodo genitore, passando il nodo che vogliamo rimuovere da esso come parametro.
Il metodo moveChild() restituisce come valore il nodo rimosso, oppure null se il nodo che volevamo rimuovere non esisteva.

//trova il nodo che vogliamo eliminare var findElement = document.getElementById("notebook"); //chiama il metodo deleteChild sul nodo genitore //e passagli il nodo trovato come parametro findElement.parentNode.removeChild(findElement);

Ad esempio, rimuovi l'ultimo figlio di un elemento con id="myID" :

//ottieni l'elemento con id="myID" var myID = document.getElementById("myID"); //ottiene l'ultimo nodo figlio dell'elemento myID var lastNode = myID.lastChild; //Perché non sappiamo se l'ultimo nodo figlio dell'elemento è un elemento, //usa il ciclo while per trovare l'ultimo figlio dell'elemento myID //purché l'elemento abbia un nodo e il suo tipo non sia uguale a 1 (cioè non è un elemento) esegui while (lastNode && lastNode.nodeType!=1) ( //vai al nodo precedente lastNode = lastNode.previousSibling; ) //se abbiamo trovato un elemento nel nodo myID if (lastNode) ( // quindi deve essere rimosso lastNode.parentNode.removeChild( lastNode); )

Ad esempio, rimuovi tutti i nodi figlio da un elemento con id="myQuestion" :

//ottiene l'elemento di cui vogliamo rimuovere tutti i suoi nodi secondari var elementQuestion = document.getElementById("myQuestion"); //mentre c'è un primo elemento while (elementQuestion.firstElement) ( //rimuovilo elementQuestion.removeChild(element.firstChild); )

Esercizio

Scrivi una funzione che rimuova tutti i nodi di testo da un elemento.

Ci sono 2 liste (), scrivi un codice JavaScript che rimuova tutti gli elementi dalle liste 1 e 2.