如何使用 jQuery 或 Javascript 将动态 div 内容拆分为具有特定高度的两个 div 内容？

Question

我想使用 jQuery 或 JavaScript 将动态 div 内容拆分为具有特定高度的两个 div 内容？

例如在这里你可以看到 10 个数字会来并且想要分成两个 div。 我在这里使用数字，但任何内容都会出现，所以我们该怎么做？ 请帮忙。 提前致谢。

<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum aliquam eget massa eu commodo. Vivamus pharetra ante in orci pharetra, vitae pulvinar dolor viverra. Vestibulum massa metus, pretium ut elementum quis, molestie et quam. Sed vitae nisi lobortis, condimentum orci sed, hendrerit elit. Ut erat mauris, posuere a metus vitae, accumsan tincidunt risus.Nulla nec semper nisi.</div>

简单的内容想要分成两个具有特定行的 div。 假设 div 有 10 行，我想从第 8 行拆分内容。所以第 1 行到第 7 行在一个 div 中，第 8 行到第 10 行在另一个 div 中。

Answer 1

注意：我假设“动态内容”由原始div中包含的 HTML 元素组成。

为了将孩子从一个div拆分为另一个，您将执行以下操作：

1. 创建一个新的 div （如果你想回收属性，或者克隆旧的）
2. 将孩子移动到新的 div 中
3. 添加额外的边距以分隔 2 个 div

在 JavaScript 中：

// Assume `div` is the original div

// Create new div
const new_div = document.createElement("div");

// Or clone the old div
// const new_div = div.cloneNode();

const total_elements_kept = 8;

// Move the children of the original div into the new div
Array.from(div.children).slice(total_elements_kept, )
    .forEach(function (elm) {
        new_div.appendChild(elm);
    });

// (optional) Add extra margin to separate the 2 divs
// (Note: this would be better done with CSS)
div.style.marginBottom = "40px";

如果“动态内容”是文本形式，则需要在遵循与上述类似的过程之前对其进行拆分。