Qual è la differenza tra ilappendChild + createElement
var div = document.createElement('div');//output -> [object HTMLDivElement]
document.getElementById('container').appendChild(div);
e
var div = '<div></div>';
document.getElementById('container').appendChild(div);//output -> <div></div>
non dovrebbe essere entrambi la stessa cosa? e se no, come faccio a far funzionare la seconda versione?
Il successivo è html puro per un elemento mentre il primo è l'oggetto. Per il primo, è necessario appendChild mentre per il successivo, è necessario innerHTML.
non dovrebbero essere entrambi uguali? e se no, come faccio a far funzionare la 2a versione su ?
var div = '<div></div>';
document.getElementById('container').innerHTML = div;
appendChild si aspetta un elemento in modo che quando si invia il testo, non sa cosa fare. Potresti voler utilizzare una libreria javascript per semplificare alcuni dei lavori, come jQuery. Il tuo codice sarebbe:
$('#container').append('<div></div>');
Là _so_ deve essere un 'hold on, 2 altre persone stanno scrivendo le risposte in questo momento' messaggio quando si digita la risposta, lol –
mentre penso che sarebbe overhead includere jquery * only * per questo, è ancora possibile discutere che * se * OP stia già usando jQuery, questa potrebbe essere stata la soluzione più vicina a ciò che l'OP voleva, quindi penso che sia un'alternativa degna, che non dovrebbe essere persa solo perché qualcun altro ha già offerto una soluzione. –
appendChild fa davvero aspettare un HTMLDomNode di qualche tipo, come ad esempio un HTMLDivElement, e non una stringa. Non sa come gestire una stringa. Si potrebbe fare
document.getElementById('container').innerHTML += div;
ma io preferisco davvero la prima versione; e mi fiderei di più per comportarsi allo stesso modo attraverso i browser.
Ci sono degli svantaggi in questo metodo? È come ottengo questo in genere. – SwankyLegg
questo non è preferito in quanto ha rimosso i listener di eventi e anche lo stato degli elementi precedenti. – Kurkula
Con il motore JS/DOM, chiamando Element.appendChild con un string come argomento, viene creato un nuovo nodo Text quindi aggiunto.
Il primo esempio crea un elemento <div>. Il secondo esempio crea un nodo di testo con <div></div> come contenuto.
tuo secondo esempio è equivalente a:
var div = '<div></div>';
document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>
Come Sarfraz Ahmed mentioned in his answer, è possibile effettuare la seconda opera ad esempio come si desidera farlo funzionare scrivendo:
var div = '<div></div>';
document.getElementById('container').innerHTML = div;
c'è davvero un browser in cui passare un argomento stringa provoca la creazione e l'aggiunta di un nuovo nodo di testo? in firefox e chrome, questo causa solo un'eccezione di argomento illegale, e non viene aggiunto nulla: http://jsbin.com/omofo3/edit –
@David Hedlund, stavo spiegando il comportamento del poster. Non ho provato alcun browser (probabilmente dovrei avere). Hai ragione; questo sembra essere un caso eccezionale. – strager
La soluzione più semplice e sostenere tutto browser:
var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString(html, "text/xml");
Un'altra soluzione può essere:
var div = '<div></div>';
var tmpDiv = document.createElement('div');
tmpDiv.innerHTML = div;
elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element
È inoltre possibile utilizzare questi per aggiungere/anteporre un elemento al DOM rispettivamente:
var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));
e utilizzare la variabile elem di indirizzare l'elemento (es):
elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;
eccetera.
se sei soddisfatto della risposta, devi contrassegnarlo come accettato. si noti che '+ =' è l'operatore che più si avvicina al comportamento 'append', non' = '. –
"The later is pure html ...". È solo una stringa. – Yay295