How can I enclose content between two divs into a div via inserting a div, put the content in the third div and remove the original content?

Question

I have been through:

1. Wrap plain text in paragraph Jquery
2. Wrap text within element
3. Wrap element between two elements in JavaScript/jQuery?
4. jQuery wrapAll contents including text between two tags
5. Get the text after span element using jquery

none of those provide a solution for what I am trying to do. I think adding the div may be part of the reason.

How can I enclose the content between div_1 and div_2 in a div_3

<div id="div_1"></div>
<strong>stuff here that always begins with same string but does not end that way</strong>
some unknown text here<br>more text<br>even more text
<div id="div_2"></div>

The real issue is that it seems you cannot insert the beginning of a div without the end of div showing up automatically.

For example, if I do something like this:

$(document).ready(function(){
$('#div_1').after('<div id="div_3">');
$('#div_2').before('</div>');
});

div_3 gets inserted after div_1 but with a closing tag i.e.

<div id="div_1"></div>
<div id="div_3"></div>
    <strong>stuff here that always begins with same string but does not end that way</strong>
    some unknown text here
    <div id="div_2"></div>

I can get it to work but it cuts out after first <br> using:

document.getElementById("div_1").parentNode.insertBefore(document.createElement("div"), document.getElementById("div_2")).id = "div_3";
var text_1 = document.getElementById("div_1").nextElementSibling.outerHTML + document.getElementById("div_1").nextElementSibling.nextSibling.nodeValue;
document.getElementById("div_3").innerHTML = text_1 + document.getElementById("div_1").nextSibling.innerHTML;

// Get the elements
let div1 = document.getElementById("div_1");
let div3 = document.getElementById("div_3");

// Get the content between the two divs
let content = div1.nextSibling;

// Remove the content
while (content != div3) {
  content.remove();
  content = div1.nextSibling;
}

Also, Shahbaz Naeem, proposed this solution before my first question was (incorrectly) tagged a duplicate

$('#div_1').nextUntil('#div_2').wrapAll('<div id="dev_3"></div>');

But same thing, it cuts out after first <br>

Answer 1

Thanks to freedomm-m's tip of .wrapAll I ended up with this

  let div1 = document.getElementById('div_1');
  let div2 = document.getElementById('div_2');
  let div3 = document.createElement('div');
  div3.setAttribute('id','div_3');
  div2.parentNode.insertBefore(div3, div2);
  let content = div1.nextSibling;
  let contentElements = [];
  while(content && content !== div2) {
    contentElements.push(content);
    content = content.nextSibling;
  }
  $(contentElements).wrapAll(div3);

https://jsfiddle.net/akmiecik/hzetk3pw/72/

Answer 2

First, let's have a proof-of-concept

setTimeout(function() {
    let html1 = document.getElementById("div_1").outerHTML;
    let html2 = document.getElementById("div_2").outerHTML;
    let bodyHTML = document.body.innerHTML;
    let content = bodyHTML.substring(bodyHTML.indexOf(html1) + html1.length, bodyHTML.indexOf(html2));
    document.body.innerHTML = bodyHTML.substring(0, bodyHTML.indexOf(content)) + `<div id="div_3">${content}</div>` + bodyHTML.substring(bodyHTML.indexOf(html2));
}, 1500)

div {
    width: 100%;
    min-height: 100px;
    border: 1px solid black;
}

#div_1 {
    background-color: red;
}

#div_2 {
    background-color: green;
}

#div_3 {
    background-color: #4596ff;
}

<div id="div_1"></div>
<strong>stuff here that always begins with same string but does not end that way</strong>
some unknown text here
<div id="div_2"></div>

Explanation: the innerHTML is the inner HTML of the element. The outerHTML is the outer HTML of the element. These can be treated as strings and we can override them with strings, the result ending up being an HTML.