Returning HTML elements

Question

I am using some JavaScript to create new HTML elements and then I return them using the MooTools inject method.

 display: function() {
        var threadTitle = new Element('h2',{
            'class': 'postItem',
            'data-id': this.id,
            'text': this.title,
            'href': '#',
            events: {
                click: function(){
                    $('newComment').setStyle('visibility', 'visible');
                    var id = this.get('data-id');
                    $('thread').value = id;
                    callThread(id);
                }
            }
        });

        var deleteT = new Element('a',{
            'class': 'deleteItem',
            'data-id': this.id,
            'text' : 'Delete',
            'href' : '#',

            events: {
                click: function(){
                    var deleteID = this.get('data-id');
                    deleteThread(deleteID)
                }
            }
        });

        var editBtn = new Element('input',{
            'class': 'mt-btn',
            'value': 'Edit',
            'type': 'button',
            'data-id': this.id,
            'text' : 'Edit',
            'href' : '#',
            events: {
                click:  function(){


                }
            }
        });



        deleteT.inject(threadTitle);
        editBtn.inject(threadTitle);
        return threadTitle;
    }
});

This obviously returns the new elements inside of the h2 as I inject into it. Is there a way to create each one outside of the H2, so in a sense

<h2></h2>
<a></a>
<input></input>

I have tried using the MooTools way of using editBtn.inject(threadTitle, 'after'); but this doesn't seem to work and nothing gets returned. So by question is how do I return the elements on the page one after each other not injected into the h2 element.

Answer 1

I have tried using the MooTools way of using editBtn.inject(threadTitle, 'after'); but this doesn't seem to work and nothing gets returned.

It think the problem there is that threadTitle doesn't, as of when you're doing that, have a parent. If it doesn't have a parent, MooTools will struggle to inject anything "after" it as doing so requires that it inject into the parent element.

If you put threadTitle into the DOM first, I suspect editBtn.inject(threadTitle, 'after'); and such will work fine.

Compare this, which doesn't work: Live Copy

var p = new Element('p');
p.set("html", "This is the <code>p</code> element");

var div = new Element('div');
div.set("html", "This is the <code>div</element> inserted <em>after</em> the <code>p</code>");
div.inject(p, 'after');

p.inject(document.body);

...with this, which does: Live Copy

var p = new Element('p');
p.set("html", "This is the <code>p</code> element");
p.inject(document.body);

var div = new Element('div');
div.set("html", "This is the <code>div</element> inserted <em>after</em> the <code>p</code>");
div.inject(p, 'after');

...the difference being that the p element has been added to the DOM before we try to inject the div after it.