Question

下面是我的JSP代码，

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

我希望得到一张附在所有＆＃39; p＆＃39; ＆＃34; class =＆＃39; comm＆＃39;＆＃34;但我没有。那么有谁可以指出我做错了什么？提前谢谢。

Answer 1

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

Answer 2

当你使用某些库（比如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循环或将其转换为Array（例如，使用像this one这样的黑客）。并且您必须在每个appendChild之前创建表单节点（或使用cloneNode），因为每个DOM节点都是唯一的，appendChild仅将其移动到所需位置。

jQuery和其他库在幕后工作，隐藏复杂性并使代码更具可读性。我建议你学习DOM API，以便了解事情的确如何运作。在实际项目中，只需坚持使用jQuery，学习它并将其用于所有操作。

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

2 个答案: