DOM
Manipolazione di elementi

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
Ricerca…


Elementi di clonazione

Un elemento può essere clonato invocando il metodo cloneNode su di esso. Se il primo parametro passato a cloneNode è true , anche i figli dell'originale verranno clonati. 

var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);

Aggiungere un elemento

In questo esempio creiamo un nuovo elemento di lista con il testo "nuovo testo" e selezioniamo il primo elenco non ordinato e il suo primo elemento di elenco. 

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Quando inseriamo un elemento, lo facciamo sotto l'elemento genitore, e appena prima di un particolare elemento figlio di quell'elemento genitore. 

parentElement.insertBefore(newElement, nextSibling);

Il nuovo elemento è inserito in parentElement e poco prima di nextSibling .

Quando si vuole inserire un elemento come ultimo elemento figlio di parentElement , il secondo argomento può essere null . 

parentElement.insertBefore(newElement, null);

Il nuovo elemento è inserito in parentElement come ultimo figlio.

Invece, appendChild() può essere usato per aggiungere semplicemente il figlio ai figli del nodo genitore. 

parentElement.appendChild(newElement);

Il nuovo elemento è inserito in parentElement come ultimo figlio.

Sostituzione di un elemento

In questo esempio creiamo un nuovo elemento di lista con il testo "nuovo testo" e selezioniamo il primo elenco non ordinato e il suo primo elemento di elenco. 

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Per sostituire un elemento, utilizziamo replaceChild : 

parentElement.replaceChild(newElement, nextSibling);

nextSibling viene rimosso dal DOM. Al suo posto ora è newElement .

Rimozione di un elemento

Un elemento può essere rimosso chiamando remove() su di esso. In alternativa, si può chiamare removeChild() sul suo genitore. removeChild() ha un supporto browser migliore di remove() . 

element.remove();

element , e tutti i suoi childnodes, vengono rimossi dal DOM. 

parentElement.removeChild(element);

element , e tutti i suoi childnodes, vengono rimossi dal DOM.

In ogni caso, è possibile inserire questo nodo nel DOM in un secondo momento, purché vi siano ancora riferimenti a questo nodo.

Aggiungi e sospendi metodi

JavaScript ora ha i metodi Accoda e Previa che erano presenti in jQuery

Il vantaggio principale di append e prepend è diverso appendChild e insertBefore , si possono prendere qualsiasi numero di argomenti o elementi HTML o testo normale (che verrà convertito in testo nodi).

Per accodare diciamo 1 div, 1 nodo di testo e 1 span 

document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))

Questo cambierà la pagina nella seguente struttura 

<body>
      .....(other elements)
      <div></div>
      "Hello World"
      <span></span>
</body>

Indipendentemente lo stesso nel corpo

Uso 

document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))

Questo cambierà la pagina nella seguente struttura 

<body>
      <div></div>
      "Hello World"
      <span></span>
      .....(other elements)
</body>

Si noti che i supporti del browser sono

Chrome 54+
Firefox 49+
Opera 39+

Maggiori informazioni su MDN

Aggiungere

anteporre



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow