Как добавить <hr> к выбранному элементу формы в JQuery?

Небольшое вступление: Я создаю форму в Django. В своем шаблоне я пытаюсь выбрать последний элемент этой формы и прикрепить к нему html-элемент <hr>, чтобы помочь очистить визуальный беспорядок.

Я пробовал выбирать ID формы и вставлять adjacenthtml, а также добавлять необработанный html. Я также пробовал передавать необработанный html в bootstrap в моей форме, но это также не помогло.

tldr; Я пытаюсь добавить элемент <hr> к чему-то, на что я нацелен в Jquery

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

С помощью 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 и как вызвать функцию, чтобы лучше ориентироваться

Вы не добавили позицию того места, где вы хотите разместить HTML по отношению кэлементу.

MDN: DOMString, представляющая позицию относительно элемента; должна быть одной из следующих строк:

  1. 'beforebegin': Before the element itself.
  2. 'afterbegin': Just inside the element, before its first child.
  3. 'beforeend': Just inside the element, after its last child.
  4. 'afterend': After the element itself.

function addHoriztonalRule() {
  document.getElementById("form").insertAdjacentHTML('afterend', '<hr>');
}
addHoriztonalRule()
<form id="form" method="post">
  <input type="button" value="button">
</form>

Вернуться на верх