JS DOM equivalente para jQuery anexar

Question

¿Cuál es el equivalente DOM estándar para jQuery

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

Answer 1

Yo creo que hay que extender la propiedad innerHTML para hacer esto

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

alguna explicación:

• [0] es necesario porque element es una colección
• + = extienden innerHTML y no sobrescribir
• cierre </a> necesaria ya que algunos navegadores permiten solamente HTML válida para ajustarse a innerHTML

Answer 2

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

Answer 3

a partir del código fuente de jQuery:

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

Tenga en cuenta que con el fin de hacer que funcione lo que necesita para construir el elemento DOM de la cadena, se está haciendo con la función jQuery domManip.

jQuery 1.7.2 source code

Answer 4

Uso DOM manipulaciones, no 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

La manera más fácil de replicar Jquery método append en JavaScript puro es con "insertAdjacentHTML"

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

Más Información - MDN insertAdjacentHTML