如何将 <hr> 附加到在 JQuery 中选择的表单元素？答案

【问题标题】：how to append a <hr> to a form element selected in JQuery?如何将 <hr> 附加到在 JQuery 中选择的表单元素？
【发布时间】：2021-10-20 15:01:19
【问题描述】：

一些介绍：我正在 Django 中创建一个表单。在我的模板中，我试图选择该表单的最后一个元素并附加一个<hr> html 元素以帮助清理视觉混乱。

我已尝试选择表单 ID 并插入相邻 HTML 以及附加原始 html。我也尝试过将原始 html 传递到我的表单中的引导程序中，但这也无法呈现。

tldr;我正在尝试将 <hr> 元素附加到我在 Jquery 中定位的内容

function addHoriztonalRule() {
            document.getElementById("form").insertAdjacentHTML(
                "<hr>");
        }

【问题讨论】：

.insertAdjacentHTML() 需要两个参数：位置和文本。文档在这里：developer.mozilla.org/en-US/docs/Web/API/Element/…
只是好奇，如果您使用的是 JQuery，为什么要使用 document.getElementById("form") 而不是 $("#form")？表单的id真的是form吗？
Phil Cowan，我更改了项目的名称以使 Stack Overflow 更易于理解/阅读。 Artisan，我最初列出了参数并将其删除，因为它没有渲染并尝试过，它只是将东西扔到墙上，这就是你在这里看到的。不过，我确实很感谢您的意见。感谢两位抽出宝贵时间。

【解决方案1】：

使用 jquery 你可以这样使用：

function addHoriztonalRule() {
    $('#form').after("<hr>");
}

addHoriztonalRule();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <input type="text" value="hi" >
</form>

不过最好还是分享一下页面的结构，多学习DOM以及如何调用函数更好的指导

【讨论】：

【解决方案2】：

您未能添加位置您希望放置 HTML 相对于元素的位置。

MDN：一个 DOMString 表示相对于元素的位置；必须是以下字符串之一：

function addHoriztonalRule() {
  document.getElementById("form").insertAdjacentHTML('afterend', '<hr>');
}
addHoriztonalRule()

<form id="form" method="post">
  <input type="button" value="button">
</form>

【讨论】：