Let's say I get an element from the dom:

[<div id="generic-wrapper"> ... </div>]

How could I flatten it to include all elements inside?

EDIT: "generic-wrapper" is an arbitrary id, it could be anything. It could also be nested, as in wrappers within wrappers.

EDIT2: I want the final array to include all of the content of the original array, just flattened. This includes the wrapper. Is there a systematic way to construct and iterate through an array such as the one I am describing? Thanks again and apologies for the confusion.

Let's say I get an element from the dom:

[<div id="generic-wrapper"> ... </div>]

How could I flatten it to include all elements inside?

EDIT: "generic-wrapper" is an arbitrary id, it could be anything. It could also be nested, as in wrappers within wrappers.

EDIT2: I want the final array to include all of the content of the original array, just flattened. This includes the wrapper. Is there a systematic way to construct and iterate through an array such as the one I am describing? Thanks again and apologies for the confusion.

• javascript
• jquery
• html
• dom
• cross-browser

• 1 What do you mean by "Flatten" ? – ahren Commented Aug 9, 2012 at 1:51
• the element "wrapper" containers other elements. Instead of an array containing only wrapper, I want it to contain all elements inside wrapper, and any elements inside those. – zallarak Commented Aug 9, 2012 at 1:53
• Do you want the returned array to include the wrapper element? – nbrooks Commented Aug 9, 2012 at 2:03

5 Answers 5

Select them all at once:

var $allElements = $("#wrapper,#wrapper *")

I'm not sure if you want to exclude the wrapper element itself, but if so just use "#wrapper *".

Update:

'Simple' solution:

var domElements = [<div id="generic-wrapper">...</div>];

$.merge( domElements, $(domElements).find('*'));

Better solution:

It sounds like what you're trying to do is, given an array of dom elements, add each of their descendants to the array. If you're using jQuery for the intended DOM manipulation, you should just select them directly (as shown in code sample below). This returns a jQuery object, which has an underlying array structure that you can use for basic array-indexing. If you need to get a true array, you can use the object's .toArray() method. The jQuery object is typically more useful though, since you can manipulate all matched elements easily (and you can also iterate over them using .each()).

Select #wrapper and all of its descendants (if id is stored in a variable, replace '#wrapper' with '#' + the variable name.)

var domElements = $('#wrapper, #wrapper *');

An HTML string?

$('<div>').append($('#wrapper').clone()).html();

Here's one where you don't have to know the id of the parent selector when you flatten the selection:

var x = $('selector for the parent element');
var y = x.add($('*', x));

How it works:

Let's say you had an html structure like this:

<div id="foo">
  <ul>
    <li></li>
  </ul>
</div>

So the first line, var x = $('#foo') selects the wrapper.

The second line, var y = x.add($('*', x)) will take your selection of the wrapper and add to it a recursive selection of every element contained inside the wrapper. The end result looks like this:

[<div id="foo">...</div>, <ul>...</ul>, <li></li>]

Here's a vanilla JS solution. It takes a DOM element and returns a list.

function flatten(element) {
    const elements = [];
    for (let child of element.childNodes) {
        if (child.childElementCount == 0)
            elements.push(child)
        else
            elements.push(...flatten(child));
    }
    return elements
}

For example, this would take a DOM object like:

<svg>
  <g>
    <g>
      <polygon points="..."/>
      <polygon points="..."/>
    </g>
    <path d="..."/>
    <path d="..."/>
  </g>
</svg>

And output:

[<polygon>, <polygon>, <path>, <path>]

Sidenote: If instead what you need is something that flattens the DOM object in-place, checkout this gem.