Как я могу добавить элемент после другого элемента?

Question

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

Я пытаюсь добавить элемент в поле ввода с именем "form [username]:

$( "<p>Test</p>" ).insertAfter('input[name=form[username]]');

Но это не работает. Ничего не происходит.

Iожидайте этого результата:

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
   <p>Test</p>
</div>

Answer 1

Кроме того, вы можете просто использовать метод jQuery .append(), чтобы добавить свой абзац к существующим элементам страницы.

$('#content_one').append('<p>Test 1</p>');
$('#content_two').append('<p>Test 2</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_one">
  <label for="form_username" class="required">Username</label>
  <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

<div id="content_two">
  <label for="form_password" class="required">Password</label>
  <input type="text" id="form_password" name="form[password]" required="required" class="form-control">
</div>

Answer 2

Поскольку ваш входной тег имеет идентификатор form_username, вам больше не нужно использовать атрибут [name] в качестве селектора.

$( "<p>" ).text("Test").insertAfter('#form_username');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

---

Или, если у вас есть только 1 входной тег, вы можете попробовать:

$( "<p>" ).text("Test").insertAfter('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>

---

Или, если вы хотите использовать атрибут name, вы можете переименовать значение form[username] в form_username, например:

$( "<p>" ).text("Test").insertAfter('[name=form_username]');
$( "<p>" ).text("Test").insertAfter('input[name=form_username]');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form_username" required="required" class="form-control">
</div>

---

Если вы не хотите переименовывать значение атрибута name, вы можете попробовать:

$( "<p>" ).text("Test").insertAfter('input[name*="username"]');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <label for="form_username" class="required">Username</label>
   <input type="text" id="form_username" name="form[username]" required="required" class="form-control">
</div>