返回HTML元素

Question

我正在使用一些JavaScript來創建新的HTML元素，然後使用MooTools注入方法返回它們。

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; 
    } 
}); 

這顯然返回h2內的新元素，因爲我注入它。有沒有一種方法來創建H2的每一個之外，所以從某種意義上講

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

我一直在使用使用editBtn.inject(threadTitle, 'after');的MooTools的方式嘗試，但似乎並沒有工作，沒有東西返回。所以問題是我如何返回一個接一個的頁面上的元素，而不是注入到h2元素中。

Answer 1

我嘗試過使用MooTools的方式使用editBtn.inject(threadTitle, 'after');，但這似乎不起作用，沒有任何東西會返回。

它認爲存在的問題是，threadTitle沒有，當你這樣做時，有一個父母。如果它沒有父母，MooTools將很難在「之後」注入任何東西，因爲這樣做需要注入父母元素。

如果你先把threadTitle加入到DOM中，我懷疑editBtn.inject(threadTitle, 'after');這樣可以正常工作。

比較這一點，這不工作：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); 

...這個，這不：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'); 

...的區別在於p因素是在我們嘗試在其後注入div之前添加到DOM。