Cómo clonar un elemento con un nombre de clase determinado

Estoy usando getElementById cuando necesito clonar el elemento div.

Código:

 printHTML( document.getElementById("div_name").cloneNode(true)); 

Ahora necesito usar getElementsByClassName

CloneNode no funciona cuando se usa getElementsByClassName . ¿Cómo puedo poner el nombre de la clase aquí?

Gracias

EDITAR:

Cuando trato de usar esto:

 printHTML( $('.dataTables_scroll').clone(true) ); 

Puedes ver mi función:

 function printHTML(clonedDive){ var iframe = document.createElement("iframe"); document.body.appendChild(iframe); iframe.contentWindow.onunload = function(){ $(".DTTT_container").show("fast"); $("#header_outer").show("fast"); $(".ColVis.TableTools").show("fast"); $("#footer").show("fast"); }; iframe.contentWindow.document.body.appendChild(clonedDive); iframe.contentWindow.print(); document.body.removeChild(iframe); } 

Estoy obteniendo un error en esta línea:

 iframe.contentWindow.document.body.appendChild(clonedDive); 

Esta es una descripción del error:

 Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

getElementsByClassName obtiene una lista de nodos, o un objeto similar a una matriz que contiene elementos, si lo desea, ya que puede haber más de un elemento con la misma clase.

getElementsByClassName hace incluso si solo un elemento coincide con la clase.
En general, puede reconocer métodos como ese sea el s en getElements , lo que significa que obtiene múltiples elementos, es decir, un nodeList.

getElementById solo obtiene un elemento ya que los ID son únicos.

Para obtener el primer elemento en la lista de nodos, usa la notación de corchetes, así:

 document.getElementsByClassName("div_name")[0].cloneNode(true); 

o uno puede usar querySelector , que solo obtiene el primer elemento coincidente

 document.querySelector(".div_name").cloneNode(true); 

La solución jQuery sería:

 $('.div_name').clone(true); 

y para iterar sobre elementos con un cierto nombre de clase, usarías un bucle

 var elems = document.getElementsByClassName("div_name"); for ( var i=0; i 

Debido a getElementsByClassName devuelve una matriz de objetos, por lo que debe usar for loop para iterar entre ellos, de la siguiente manera:

  for (i = 0; i < document.getElementsByClassName("div_name").length; i++){ printHTML( document.getElementsByClassName("div_name")[i].cloneNode(true)); } 

de lo contrario, si conoce el índice del elemento, puede decir que 1

 printHTML( document.getElementsByClassName("div_name")[1].cloneNode(true)); 

¿Esto no funciona? :

 printHTML( document.getElementsByClassName("class_name")[0].cloneNode(true)); 

Puede recorrer los elementos y clonar uno por uno …

 var e = document.getElementsByClassName('div'); for (var i = 0; i < e.length; i += 1) { // Clone e[i] here console.log(e[i].cloneNode(true)); } 
    Intereting Posts