Adding Elements inside another DOM element in MooTools

Question

Can I add an object of Elements inside another DOM element using grab or inject or anything else?

There are two items in the object, both of type Element that are created through Javascript:

var firstElem = new Element("div", {text: "something"}); // <div>something</div>
var secondElem = new Element("div", {text: "else"});     // <div>else</div>
var myDivs = new Elements([firstElem, secondElem]);

myDivs contains both the elements (firstElem, secondElem) as an array and I want to add this myDivs object to the DOM element below, using something like $("container").grab(myDivs). So the DOM state before adding looks like:

<div id="container"></div>

After adding, it looks like:

<div id="container">
    <div>something</div>
    <div>else</div>
</div>

But I'm getting this error when calling $("container").grab(myDivs):

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

I could add each Element to the container one by one, but am wondering if there's a way to add an object of Elements directly due to the way my solution is architected.

Answer 1

You ought to use .adopt() instead. See this example on jsBin: http://jsbin.com/anayu

window.addEvent("domready", function(){ 

  var firstElem  = new Element("div", {text: "something"}); 
  var secondElem = new Element("div", {text: "else"}); 
  var myDivs     = new Elements([firstElem, secondElem]); 

  $("container").adopt(myDivs); 

}); 

Answer 2

Element method: adopt

Works like Element:grab, but allows multiple elements to be adopted.

That should be exactly what you're looking for ;)