Converting DOM elements back into HTML

Question

I am creating a script to rearrange <div> elements on a page. It can get them into an array, but that array's contents look like:

[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],

None of the following have worked:

my_array.innerHTML

my_array.outerHTML

my_array.html

my_array.toString()

So how can I get this array back into something that looks like: <div class="rect red"></div><div class="rect green"></div><div class="rect blue"></div><div class="rect yellow"></div>, and have that render as divs on the page?

Here is the full code:

<!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;	}	document.getElementById("target").innerHTML = updated_arr; }); </script> </body> </html>

You have to call outerHTML on the array elements, not the array. — Barmar
– Barmar, Commented Oct 31, 2019 at 2:10
@Barmar Thanks. When I try my_array[i].html or similar things (like outer and inner) I get TypeError: my_array[i] is undefined What am I doing wrong? — Mentalist
– Mentalist, Commented Oct 31, 2019 at 2:17

Ritesh Khandekar · Accepted Answer · 2019-10-31 02:52:21Z

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>

It is similar to:

var div=document.createElement("div"); console.log(div); document.body.appendChild(div);

Madhav Sharma · Accepted Answer · 2019-10-31 03:07:55Z

Two minor changes to make it work:

use < instead of =< in the loop to avoid one extra iteration.
Use Element.appendChild() to add elements in a Node. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Great job on using this!

<!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; } updated_arr.map(element => document.getElementById("target").appendChild(element) ); }); </script> </body> </html>

Thanh Nguyen · Accepted Answer · 2019-10-31 02:45:44Z

No need to create the updated_arr. Just join the outerHTML of the HTMLElement objects in sort array.

move_before(sort, current_index); document.getElementById("target").innerHTML = sort.map(elem => elem.outerHTML).join('');

Also update your event binding to $("#target").bind('click', '.rect', function() { ...... });

Collectives™ on Stack Overflow

Converting DOM elements back into HTML

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related