Question

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

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元素之后添加了创建的元素（标题，内容），这意味着当您稍后将article元素放入“plan”元素时，标题和内容元素没有被添加（它们位于空间的空洞中）。您需要使用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");

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

2 个答案: