Добавить HTML после элемента ввода с jQuery

Question

Я пытаюсь добавить некоторый HTML после поля input с помощью jQuery, но он не работает, и я не понимаю, почему.

<input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true"> 

$(document).ready(function() { 
    jQuery("input[title='Password']").append('<P>test</P>'); 
}); 

Answer 1

Вы должны использовать метод .after().

append метод вставка содержимого до конца каждый элемент в наборе согласованных элементов.

after способ вставить содержимое после каждый элемент в наборе согласованных элементов.

$(document).ready(function() { 
 
    jQuery("input[title='Password']").after('<p>test</p>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">

Кроме того, вы можете использовать insertAfter метод следующим образом.

$(document).ready(function() { 
 
     $('<p>test</p>').insertAfter($("input[title='Password']")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">

Answer 2

Вы не можете добавлять HTML к входу. Но вы можете это сделать (если вы хотите на самом деле установить значение):

$(document).ready(function() { 
    jQuery("input[title='Password']").val('test'); 
}); 

Хотя это не дает ответа на отредактированный вопрос, другие ответы адреса, добавляя элемент после ввода.

Answer 3

append() используется для добавления содержимого внутри элемента, однако образуют входы не содержат каких-либо содержимого. Обычно вы должны использовать val(), чтобы установить их значения.

Однако добиться того, что вам требуется использовать метод after() вместо того, чтобы вставить содержимое в к DOM после выбранного элемента:

$(function() { 
 
    $("#ripo").after('<P>test</P>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="secret password" maxlength="255" id="ripo" title="Password" class="ms-long ms-spellcheck-true">