Add HTML after an input element with jQuery

Question

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

Sorry I expressed myself somewhat sloppy. I want to add some HTML after an INPUT field, question adjusted. — dadde
– dadde, Commented Feb 9, 2017 at 9:59
I'd strongly suggest you at least skim read the methods that jQuery has: api.jquery.com. Most of them are self explanatory and give you a good idea of what can be done with the library — Rory McCrossan
– Rory McCrossan, Commented Feb 9, 2017 at 10:00

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-09 10:57:29Z

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.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">

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.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">

edited Feb 9, 2017 at 10:57

answered Feb 9, 2017 at 9:58

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maher Fattouh Over a year ago

The 2nd method will append content to the end of .parent() not necessarily after the input. It'll do what OP wanted if the input is the last element in its parent. So .after() is the way to go

Rory McCrossan · Accepted Answer · 2017-02-09 10:01:15Z

3

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.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">

answered Feb 9, 2017 at 10:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Andrew Monks · Accepted Answer · 2017-02-09 10:09:53Z

0

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.

edited Feb 9, 2017 at 10:09

answered Feb 9, 2017 at 9:58

Andrew Monks

6764 silver badges11 bronze badges

2 Comments

Rory McCrossan Over a year ago

Just FYI OP updated the question to be more clear about what he's trying to do. val() isn't the solution here.

Andrew Monks Over a year ago

have updated my answer and left it in case someone else needs this solution to the question.

Collectives™ on Stack Overflow

Add HTML after an input element with jQuery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related