Innerhtml Inserts Only [Object Htmldivelement]

innerHTML inserts only [object HTMLDivElement]

innerHTML doesn't insert DOM nodes, just strings.

Use appendChild instead

var box1 = document.querySelector(".box1"); 
var box2 = document.querySelector(".box2");

box2.appendChild( box1 );

Getting "[object HTMLDivElement]" instead of its content?

var cart_div = document.getElementById("cart_items");
var fav_items = document.getElementsByClassName("favourite");
for(let i = 0; i< fav_items.length; i++){
cart_div.innerHTML += fav_items[i].innerHTML;
}

I think by adding innerHTML to the fav_items you'll get what's inside.
Also you had a typo with classname 'favorite' instead of 'favourite'.

returning [object HTMLDivElement] when using document.getElementById

When reading, use

var mArray = document.getElementById("mArray").textContent

and if you want to use it as a JS array (assuming it is a valid js array format), you could do

var mArrayContents = document.getElementById("mArray").textContent;
var myArray = JSON.parse( mArrayContents );

Additionally, when setting the value you do not have to use JS.

You can do it directly

<div id="mArray"><%= mArray %></div>

Get content of DIV using javascript, .innerHTML not working?

you just need to get values instead of attibutes:
document.getElementById('left1').value;

Replace your code with :

var left1 = document.getElementById('left1').value;
var left2 = document.getElementById("left2").value; 
var left3 = document.getElementById("left3").value;

And Convert your div structure to input fields as getting values from div and passing it to php is very non-standard method:

<input class="column" id="left1" style="border: 2px solid #a13f80;" />
<input class="column" id="left2" style="border: 2px solid #a13f80;" />
<input class="column" id="left3" style="border: 2px solid #a13f80;" />

Converting DOM elements back into HTML

Use appendChild():

<!doctype html><html lang="en"><head><meta charset="utf-8"><style>.rect {width:24px; height:12px; border-radius:12px; border:4px solid rgba(0,0,0,0.25); margin-bottom:12px}.red {background-color:#c21}.green {background-color:#1c3}.blue {background-color:#28f}.yellow {background-color:#ed1}</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body><div id="target"> <div class="rect red"></div> <div class="rect green"></div> <div class="rect blue"></div> <div class="rect yellow"></div></div><script>function move_before(arr, ndx){ //move the element one place earlier in the array var move = arr[ndx]; arr.splice(ndx, 1); //from index #'ndx', remove 1 element arr.splice(ndx-1, 0, move); //from the index before #'ndx', remove 0 elements, then insert the value of 'move'}
$(".rect").click( function() { // rearrange the order of divs when one is clicked var sort = Array.from( $(this).parent().children() ); var current_index = $(this).index();
 move_before(sort, current_index); // put each element into a new array var i = 0; var updated_arr = []; while (i <= sort.length) {  updated_arr.push(sort[i]);  i = i+1; }  for(i=0;i<updated_arr.length-1;i++){ document.getElementById("target").appendChild(updated_arr[i]);   }});</script></body></html>

How do I assign the innerHTML of a DIV to an array of DIVs

You can NOT totally avoid loops. Use Element.outerHTML

let element = document.getElementById("x");var array = Array.from(element.children)
array.splice(0, 2);element.innerHTML = array.map(e => e.outerHTML).join()

<div id="x">  <span>span 1</span>  <span>span 2</span>  <span>span 3</span></div>

Why is insertAdjacentHTML converting HTML into an object

insertAdjacentHTML inserts HTML string. You need appendChild or in your case insertBefore since you want to prepend new content into body:

document.body.insertBefore(_testHeader[0], document.body.children[0]);

Unable to pull in contents of a div into another

var distributor = document.getElementById('distributor-form');

should be

var distributor = document.getElementById('distributor-form').innerHTML;

The first line just returns the complete HTML element as an object. You're only interested in the value within the element

Is it possible to append to innerHTML without destroying descendants' event listeners?

Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append. If you want to preserve child nodes (and their event handlers), you'll need to use DOM functions:

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

Edit: Bob's solution, from the comments. Post your answer, Bob! Get credit for it. :-)

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

Can I use insertAdjacentHTML to insert DOM element

.insertAdjacentHTML() only accept string that will be parsed as HTML and inserted (like innerHTML)

To insert DOM element you can use .insertAdjacentElement()

MDN: https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement

Innerhtml Inserts Only [Object Htmldivelement]