Javascript 复制HTML子节点数组的一半

我有一个HTML元素（比如一个

div

ision），它包含一组标题（

h2

）和段落（

p

），其中包含其他元素（例如一些链接，

a

）

我的目标是将我的HTML元素切成两个大小相同的元素

约束：不应剪切段落、标题和块

我的想法是浏览子节点列表并复制每个段落的

childNodes

每次我复制一个段落时，我都会计算大小，以便知道我是否达到了分区的一半大小

下面是一些代码来解释它：

var elm = document.getElementById('article_colonnes'); // I want to cut this into 2 parts
var paragraphesNumber = paragraphes.length;
var halfSize = elm.innerHTML.length / 2 ;
var col1 = document.getElementById('col1');
var col2 = document.getElementById('col2');
var i=0;
do {
  var node = createNodeFromParagraphe(paragraphes[i]);
  if(node) {
    col1.appendChild(node);
    // update the size of the 1st column by updating inner HTML
    col1String = col1String + paragraphes[i].innerHTML;
  }
  i++;
  // compute the size of the 1st column
  col1Size = col1String.length;
}
while(col1Size < halfSize  || i < paragraphesNumber) ;

var elm=document.getElementById（'article_colonnes'）；//我想把它分成两部分
var Paragraphs Number=段落长度；
var halfSize=elm.innerHTML.length/2；
var col1=document.getElementById（'col1'）；
var col2=document.getElementById（'col2'）；
var i=0；
做{
var node=createnodefragraphy（段落[i]）；
如果（节点）{
col1.appendChild（节点）；
//通过更新内部HTML来更新第一列的大小
col1String=col1String+段落[i].innerHTML；
}
i++；
//计算第一列的大小
col1Size=col1String.length；
}
而（col1Size

我对第二栏也是这么做的

---

感谢您的帮助。

如果您尝试制作自动双栏布局；看看

要获得真正的两列布局，您需要段落的高度（而不是其中的字符）。这里的问题是：获取高度的唯一方法是等待浏览器布局页面，除非您指定每个元素的宽度。否则，用户将看到丑陋的闪烁

因此，我建议尝试以下方法：

---

使用大多数浏览器支持的多列布局。如果浏览器不是IE，也许你可以解释一下这样做的目的是什么，那么我们可以进一步提供帮助？我想他想要一个自动的两栏布局。我认为一个带有浮动元素的纯CSS解决方案可以做到这一点，而不需要所有JavaScript麻烦。更妙的是，他可以使用多栏布局，除IE外，所有主流浏览器都支持这种布局。IE用户完全可以接受。