如何使用给定的类名来克隆元素 [英] How to clone element with given class name

问题描述

代码：

  printHTML（document.getElementById（div_name）。cloneNode（true））; 
  

现在我需要使用 getElementsByClassName 使用 getElementsByClassName 时，CloneNode不起作用，p>

如何将类名放在这里？

谢谢

编辑：

当我尝试使用这个：

  printHTML（$（'。dataTables_scroll' ）.clone（true））; 
  

您可以看到我的功能：

  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）; 
} 
  

我在此行中收到错误：

  iframe.contentWindow.document.body.appendChild（clonedDive）; 
  

这是一个错误描述：

 未捕获错误：NOT_FOUND_ERR：DOM异常8 
  

解决方案

getElementsByClassName 获取一个nodelist，或者一个包含元素的数组类对象，如果你愿意的话，可以有多个同一个类的元素。 / p>

getElementsByClassName 即使只有一个元素与该类匹配。

您一般可以识别像 s 在 getElements 中的方法，这意味着它获取多个元素，即一个nodeList。

getElementById 只能获得一个元素，因为ID是唯一的。

得到nodelist中的第一个元素，使用括号符号，如下所示：

  document.getElementsByClassName（div_name）[0] .cloneNode（真）; 
  

或者可以使用 querySelector 第一个匹配元素只有

  document.querySelector（。div_name）cloneNode（true）; 
  

jQuery解决方案将是：

<$ p 。$ p> $（ 'div_name'）克隆（真）;


并迭代使用某个类名的元素，您将使用循环

  var elems = document.getElementsByClassName（div_name）; （var i = 0; i< elems.length; i ++）{
 printHTML（elems [i] .cloneNode（true））; 
 
 
} 
  

I am using getElementById when I need to clone the div element.

Code:

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

Now I need to use getElementsByClassName

CloneNode is not working when using getElementsByClassName. How can I put class name in here?

Thank's

EDIT:

When I try to use this:

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

You can see my function:

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); 
}

I am getting an error in this line:

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

This is an error description:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

解决方案

getElementsByClassName gets a nodelist, or an array-like object containing elements if you will, as there can be more than one element with the same class.

getElementsByClassName does this even if only one element matches the class.
You can generally recognize methods like that be the s in getElements, which means it gets multiple elements, i.e. a nodeList.

getElementById only gets one element as ID's are unique.

To get the first element in the nodelist, use bracket notation, like so:

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

or one could use querySelector, which gets the first matching element only

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

The jQuery solution would be:

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

and to iterate over elements with a certain classname you'd use a loop

var elems = document.getElementsByClassName("div_name");

for ( var i=0; i<elems.length; i++ ) {
    printHTML( elems[i].cloneNode(true) );
}

这篇关于如何使用给定的类名来克隆元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！