如何使用jQuery向选中的form表单元素追加<hr>标签？

原有代码错误原因 #

insertAdjacentHTML方法存在参数缺失问题，该方法第一个参数为必填的插入位置标识，第二个参数才是待插入的HTML内容，你之前的代码没有传入位置参数，因此无法正常渲染元素。

原生JavaScript实现方案 #

调整后的代码如下：

function addHorizontalRule() {
    // beforeend 表示插入到目标元素内部的最后位置
    document.getElementById("form").insertAdjacentHTML("beforeend", "<hr>");
}

jQuery实现方案 #

如果使用jQuery实现需求，写法更简洁：

function addHorizontalRule() {
    $("#form").append("<hr>");
}

注意事项 #

• 确保函数执行时表单DOM已经完成加载，可将函数调用放在页面</body>标签之前，或放在DOM加载完成的回调函数中，避免出现选中不到表单元素的问题
• 若Django渲染后的表单实际ID不是form的话，需要替换为真实的表单ID；如果没有手动指定表单ID，可以在Django模板的form标签上手动添加id属性：

<form id="form" method="post">
    {% csrf_token %}
    {{ form.as_p }}
</form>

内容的提问来源于stack exchange，提问作者Bullsfan2333