How to split dynamic div content into two div content with specific height using jQuery or Javascript?

Question

I want to split dynamic div content into two div content with specific height using jQuery or JavaScript?

for example here you can see 10 number will come and want to split into two divs. i am using number here but any content will come so how we can do this? please help. thanks in advance.

<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>

Simple content want to split into two div with specific line. suppose div has 10 lines and i want to split content from line 8. so line no 1 to 7 in one div and line no 8 to 10 in other div.

Answer 1

Note: I'm assuming the "dynamic content" is made up of HTML elements contained within the original div.

In order to split the children from one div into another you would do the following:

1. Create a new div (or clone the old one if you want to recycle properties)
2. Move the children into the new div
3. Add extra margin to separate the 2 divs

In 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";

If the "dynamic content" were to be in text form it would need to be split before following a similar procedure as the above mentioned.