Question

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 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

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).