javascript - 复制 HTML 子节点数组的一半

Question

我有一个 HTML 元素(假设是一个 divvision)，其中包含一组标题 (h2) 和段落 (p)，其中里面的其他元素(例如一些链接，a)。

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

约束:段落、标题和 block 不应被剪切

我的想法是浏览子节点列表并复制每个段落的 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) ;

我对第二列也做了同样的事情。

感谢您的帮助。

Answer 1

如果您尝试创建自动两列布局；看看multicolumnlists