I'm trying to add some HTML after an input field using jQuery but it's not working and I don't understand why.

<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>');
});

I'm trying to add some HTML after an input field using jQuery but it's not working and I don't understand why.

<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>');
});

• javascript
• jquery
• html

• 2 append to an input ????? doesn't make any sense – Pranav C Balan Commented Feb 9, 2017 at 9:57
• jQuery("input[title='Password']").val('<P>test</P>'); – Pranav C Balan Commented Feb 9, 2017 at 9:58
• can you append p in input val ^? – guradio Commented Feb 9, 2017 at 9:58
• Sorry I expressed myself somewhat sloppy. I want to add some HTML after an INPUT field, question adjusted. – dadde Commented Feb 9, 2017 at 9:59
• I'd strongly suggest you at least skim read the methods that jQuery has: api.jquery.. Most of them are self explanatory and give you a good idea of what can be done with the library – Rory McCrossan Commented Feb 9, 2017 at 10:00

3 Answers 3

You have to use .after() method.

append method insert content to the end of each element in the set of matched elements.

after method insert content after each element in the set of matched elements.

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

<script src="https://ajax.googleapis./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">

Also, you can use insertAfter method in the following way.

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

<script src="https://ajax.googleapis./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">

append() is used to add content within an element, however form inputs do not contain any content. Normally you'd use val() to set their values.

However to achieve what you require use the after() method instead to insert content in to the DOM after the selected element:

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

<script src="https://ajax.googleapis./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">

You cannot append HTML to an input. But you can do this (if you wanted to actually set the value):

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

Although this does not answer the edited question, other answers address appending an element after the input.