MooTools 使用抓取/注入来附加子元素

Question

如何将一个新元素附加到另一个元素中？下面的代码使用了图书馆网站上的示例，但没有呈现任何内容。我使用渲染的 .innerHTML 测试了包含元素。我做错了什么？

var Article = new Class({
  initialize: function(order, title, body){
    this.order = order;
    this.title = title;
    this.body = body;
  }
});

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

  var Content = new Hash();

  Content.set("dbitem15", new Article(1, "title1", "content1"));
  Content.set("dbitem33", new Article(2, "title2", "content2"));

  Hash.each(Content, function(value, key){

    var article_title = new Element("div", {id: "title" + key});
    article_title.set("class", "article_title");
    article_title.innerHTML = value.title;

    var article_content = new Element("div", {id: "content" + key});
    article_content.set("class", "article_content");
    article_content.innerHTML = value.body;

    var article = new Element("div", {id: key});
    article.set("class", "article");

    article.inject(article_title, "after");
    article.inject(article_content, "after");
    //article.grab(article_title, "after");
    //article.grab(article_content, "after");
    //article.innerHTML = key;

    $("plan").grab(article,"after");
  });

});

Answer 1

以下是一些有效的（重构的）代码： http://jsfiddle.net/mqchen/kJqLf/1/

主要区别在于：

article.grab(article_title, "bottom");
article.grab(article_content, "bottom");

问题是您使用了 inject(..., after) 这意味着您在article元素之后添加了创建的元素（标题、内容），这意味着当你稍后将文章元素放入“计划”元素中，未添加标题和内容元素（它们位于真空空间中的某处）。您需要使用grab(..., Bottom)将标题和内容元素放入文章元素中。

Answer 2

假设我没有错误地读取代码，您正在尝试将 article_title 和 article_content 插入到 article 中，是吗？：

article.inject(article_title, "after");
article.inject(article_content, "after");

在这种情况下，您已经改变了元素。 .inject() 引用要注入的元素，第一个参数是容器元素。

所以尝试：

article_title.inject(article, "after");
article_content.inject(article, "after");