MooTools using grab/inject to append child elements

How do I append a new Element into another? The code below is using the examples on the library's site but nothing is rendered. I tested the containing Element by using .innerHTML which does render. what am I doing wrong?

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开发者_JS百科 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");
  });

});

Here is some (refactored) code that works: http://jsfiddle.net/mqchen/kJqLf/1/

The main difference is this:

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

The problem was that you used inject(..., after) which means that you added the created elements (title, content) after the article element, which means that when you later put the article element into the "plan" element, the title and content elements were not added (they are somewhere in the empty vacuum of space). You need to put the title and content elements inside the article element using grab(..., bottom).

Assuming I am not reading the code incorrectly, you are attempting to insert the article_title and article_content into article, yes?:

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

In that case, you've switched the elements around. .inject() references the element to be injected, and the first parameter is for the container element.

So try:

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