CODEWITHSUNDEEP
jqueryhtml
Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

Why doesn't append() work with input tag?

I want to append <i>Some Text</i> after the value of the submit button. If I write it in HTML like in the code snippet, it works but if I use jQuery to append it works partially.

By partially I mean if you open Developer Tools, the appended text is present but it doesn't display on the browser screen.

enter image description here

Why does this happen? 

$(document).ready(function(){
  $('.tryout').append('<i>Hello</i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input class="tryout" type="submit"></input>

<hr>

<input type="submit"><i>Hello</i></input>

Upvotes: 0

Views: 249

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You can't append anything to an input element, use button instead

$(document).ready(function() {
  $('.tryout').append('<i>Hello</i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button class="tryout" type="submit"></button>

<hr>

<button type="submit"><i>Hello</i></button>

Or if you want you can insert the new element as a sibling of the button using .after() like $('.tryout').after('<i>Hello</i>');

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82231

You need to use .after instead of .append() to append element after certain element:

Insert content, specified by the parameter, after each element in the set of matched elements.

 $('.tryout').after('<i>Hello</i>');

Upvotes: 1

Related Questions