在MooTools中向另一个DOM元素添加元素

Question

我能否使用grab、inject或其他方式，将Elements的一个对象添加到另一个DOM元素中？

该对象中有两个项，都是通过Javascript创建的Element类型：

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 包含数组中的元素 (firstElem, secondElem)，我想使用类似 $("container").grab(myDivs) 的东西将这个 myDivs 对象添加到下面的 DOM 元素中。因此，在添加之前，DOM 状态如下：

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

添加后，它看起来像这样：

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

但是当调用$("container").grab(myDivs)时，我遇到了这个错误：

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

我可以逐个将元素添加到容器中，但想知道是否有一种方法可以直接添加一个Elements对象，因为我的解决方案的架构方式。

- Anurag

Answer 1

你应该使用 .adopt()。在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); 

}); 

- Sampson

---

出于好奇，使用 adopt() 而不是 appendChild() 有什么优势吗？@Sampson - trickpatty

@PatrickLawler 原生的DOM方法appendChild只接受单个元素引用。如果您想要添加多个元素，您需要将它们添加到一个documentFragment中，然后再附加该片段。 MooTools的adopt方法允许您传递一个或多个元素，包括集合。 - Sampson

Answer 2

元素方法：adopt

与 Element:grab 类似，但允许采用多个元素。

这应该正是你要找的东西 ;)

- Duroth

---

感谢您的快速回复，采用的工作非常好！不知道没有 Stack Overflow 我会在哪里。 - Anurag