javascript - Adding Elements inside another DOM element in MooTools - Stack Overflow

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.

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.

• javascript
• dom
• mootools

Share Improve this question Follow asked Jan 11, 2010 at 14:34 AnuragAnurag 142k3737 gold badges222222 silver badges261261 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You ought to use .adopt() instead. See this example on jsBin: http://jsbin./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); 

}); 

Element method: adopt

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

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