JS DOM equivalente per JQuery accodare

Question

Qual è l'equivalente DOM standard per JQuery

element.append("<ul><li><a href='url'></li></ul>")?

Answer 1

Credo che bisogna estendere la proprietà innerHTML per fare questo

element[0].innerHTML += "<ul><li><a href='url'></a></li></ul>"; 

qualche spiegazione:

• [0] necessaria perché element è una collezione
• + = estendono the innerHTML e non sovrascrivere
• chiusura </a> necessario in quanto alcuni browser consentono solo valido html per essere impostato su innerHTML

Answer 2

element.innerHTML += "<ul><li><a href='url'></li></ul>"; 

Answer 3

dal codice sorgente di jQuery:

append: function() { 
    return this.domManip(arguments, true, function(elem) { 
     if (this.nodeType === 1) { 
      this.appendChild(elem); //<==== 
     } 
    }); 
}, 

Nota che per farlo funzionare è necessario costruire l'elemento DOM dal stringa, viene eseguita con la funzione jQuery domManip.

jQuery 1.7.2 source code

Answer 4

Usa DOM manipolazioni, non HTML:

var list = document.createElement('ul'); 
var item = document.createElement('li'); 
var link = document.createElement('a'); 

link.href = 'url'; 

item.appendChild(link); 
list.appendChild(item); 
element.appendChild(list); 

Answer 5

Il modo più semplice per replicare Jquery metodo Append in puro JavaScript è con "insertAdjacentHTML"

var this_div = document.getElementById('your_element_id'); 
    this_div.insertAdjacentHTML('beforeend','<b>Any Content</b>'); 

Altro Info - MDN insertAdjacentHTML