如何將元素追加到由getElementsByClassName提取的父元素？

下面是我的JSP代碼，如何將元素追加到由getElementsByClassName提取的父元素？

<% 
    while(resultSet1.next()){ 
         out.println("<p class='comm'>"); 
         out.println(resultSet1.getString("answer_content")); 
         out.println("</p>"); 

        } 
%>

下面是我用的腳本，

<script> 

      $(document).ready(function() { 

       var par = document.getElementsByClassName("comm"); 

       var insert = document.createElement("form"); 
       insert.setAttribute("action","ForumSubmitCommentController"); 

       var text = document.createElement("input"); 
       text.setAttribute("type","text"); 
       text.setAttribute("name","comm_text"); 
       text.setAttribute("id","comm_text"); 
       insert.appendChild(text); 

       var comm_submit = document.createElement("input"); 
       comm_submit.setAttribute("type","submit"); 
       comm_submit.setAttribute("value","Comment"); 
       insert.appendChild(comm_submit); 

       par.appendChild(insert); 

      }); 

     </script>

我'希望獲得附加到所有的「P」與「類元素的形式= 'comm'「，但我沒有收到任何消息。所以任何人都可以指出我做錯了什麼？在此先感謝。

來源

2014-01-23 Saumil Soni

你應該考慮一直使用jQuery。它會讓事情變得更容易。 getElementsByClassName返回元素的**列表**。該列表沒有appendChild方法。您從列表中選擇要添加新元素的特定元素。 –

@FelixKling謝謝你指出現在我已經嘗試了Arun所示的代碼，它確實有效。 –

因爲par是一個數組，所以不必使用appendChild方法

$(document).ready(function() { 
    $('.comm').each(function() { 
     var insert = document.createElement("form"); 
     insert.setAttribute("action", "ForumSubmitCommentController"); 

     var text = document.createElement("input"); 
     text.setAttribute("type", "text"); 
     text.setAttribute("name", "comm_text"); 
     text.setAttribute("id", "comm_text"); 
     insert.appendChild(text); 

     var comm_submit = document.createElement("input"); 
     comm_submit.setAttribute("type", "submit"); 
     comm_submit.setAttribute("value", "Comment"); 
     insert.appendChild(comm_submit); 

     this.appendChild(insert); 

    }) 
});

演示：Fiddle

但是一個簡單的方法來做到這一點是使用

$(document).ready(function() { 
    var form = '<form action="ForumSubmitCommentController"><input type="text" name="comm_text" id="comm_text"><input type="submit" value="Comment"></form>'; 

    $('.comm').append(form) 
});

演示：Fiddle

來源

2014-01-23 16:03:51

當您使用某些庫（如jQuery）時，這種類型的DOM操作是非常基本的東西，但有時可能很難或至少對於普通的舊DOM API來說冗長。

例如document.getElementsByClassName返回HTMLCollection。它是數組發現的元素的集合。您需要以某種方式遍歷它，以將表單置於所有元素上。

例如：

nodesList = document.getElementsByClassName("helloworld"); 
for(var i = 0; i < nodeList.length; i++) { 
    var node = nodeList[i]; 
    // create form etc... 
    node.appendChild(form); 
}

注意HTMLCollection甚至不提供forEach方法 - 我們必須使用普通的for循環或它（如this one例如通過使用黑客）轉換爲第一Array。並且您必須在每個appendChild之前創建表單節點（或使用cloneNode），因爲每個DOM節點都是唯一的，並且appendChild僅將其移至期望的位置。

jQuery和其他庫在後臺執行該操作，隱藏複雜性並使代碼更具可讀性。我建議你只學習DOM API，以瞭解事情的真正工作方式。在真正的項目中，只需使用jQuery，學習它並將其用於所有操作。

來源

2014-01-23 16:39:58 vbo

謝謝你提供的信息 –

如何將元素追加到由getElementsByClassName提取的父元素？

回答

相關問題