как добавить к элементу формы, выбранному в jQuery?

#javascript #jquery #django #append

Вопрос:

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

Я попытался выбрать идентификатор формы и вставить смежный html, а также добавить необработанный html. Я также пытался передать необработанный html в загрузочную форму в своей форме, но это также не удалось отрисовать.

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

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

Комментарии:

1. .insertAdjacentHTML() требует двух параметров: позиции и текста. Документация находится здесь: developer.mozilla.org/en-US/docs/Web/API/Element/…

2. Просто любопытно, если вы используете jQuery, почему вы используете document.getElementById(«форма»), а не $(«#форма»)? И действительно ли идентификатор формы является формой?

3. Фил Коуэн, я изменил названия элементов, чтобы сделать их более понятными/читаемыми для переполнения стека. Ремесленник, у меня изначально был указан параметр, и я удалил его, так как он не отображался и не пытался без него просто бросать вещи в стену, что вы видите здесь. Тем не менее, я ценю ваш вклад. Спасибо вам обоим, что нашли время.

Ответ №1:

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

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

  1. «перед началом»: Перед самой стихией.
  2. «после начала»: Как раз внутри элемента, перед его первым потомком.
  3. «до конца»: Только внутри элемента, после его последнего дочернего элемента.
  4. «после«: После самого элемента.
 function addHoriztonalRule() {
  document.getElementById("form").insertAdjacentHTML('afterend', '<hr>');
}
addHoriztonalRule() 
 <form id="form" method="post">
  <input type="button" value="button">
</form> 

Ответ №2:

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

Комментарии:

1. Ты спаситель, чувак, это сработало безупречно для того, что я пытался сделать. Действительно ценю это.

2. Я рад, что вы нашли это полезным