Javascript jQuery无序追加HTML元素

首先，我会说我很少使用JS，所以这可能是一个简单的错误。我遇到了在按下按钮时当场生成表单的需要。经过一些搜索，我决定使用jQuery中的

append

函数。以下是我编写的代码：

function replyToComment(commentId) {
    var element = document.getElementById("reply-form");
    if (element != null) {
        element.remove()
    }

    const html = `
    <div id="reply-form">
        <label for="comment-form">Comment:</label>
        <form method="post" id="comment-form" style="padding-bottom: 10px;">
            <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"
            <div class="form-group">
                <div>
                    <textarea type="text" name="body" maxlength="1500" class="textarea form-control" cols="40" rows="10"></textarea>
                </div>
            </div>
            <input type="text" name="comment-send" style="display:none;" readonly>
            <input type="text" name="comment_id" value=${commentId} style="display:none;" readonly>
            <button type="submit" class="btn btn-success">Send</button>
        </form>
    </div>`
    $(`#${commentId}`).append(html)
}

函数replyToComment（commentId）{
var元素=document.getElementById（“回复表单”）；
if（元素！=null）{
元素。删除（）
}
常量html=`
评论：
您似乎忽略了关闭一个
input
标记

你有：

<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"

修复你的输入错误…你永远不会关闭你的
如果属性指的是我作为
html
传递给函数的内容，那么我认为这很重要。按钮似乎没有附加到表单上，因此我无法提交它。我相信按钮必须在表单中。也许jQuery无法处理的那么大的输入ode>apend
函数？@ikiK我会在早上测试一下。你可能是对的。如果你是对的，我会更新帖子。另请参阅JS中的
insertAdjacentHTML
，这样你就不必为此使用jquery。
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}" />