jQuery not recognising input element

Question

I was trying to imitate a Lynda.com example on appending elements using jQuery. This involved appending an additional element but I couldn't get it working. I ended up just breaking things down to its bare minimum and I still can't get it working.

<h1>Here are my paragraphs</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<form>
    <input value="(enter text here)"></input>
</form>

The jQuery code I have is:

$(document).ready(function(){
'use strict';
var $group = $("input");
$group.append("<br><p>TEST TEST TEST</p>"); 
});

Obviously, as I'm here, this doesn't work - even though it's pretty much exactly as written in the lesson. Interestingly, if I replace "input" with "p", "h1" or even "form" then the "TEST TEST TEST" appends to those elements as expected.

I tried to search online for similar issues but have been unsuccessful. If someone could explain what I'm not understanding here I would be very, very grateful.

i think you got mistake with input tag, input always close with / like <input type="text" value="(enter text here)" /> — Jishnu V S
– Jishnu V S, Commented Dec 17, 2016 at 7:04
Aw man, I had a massive derp moment where I just realised the example was appending to the <div> element which held the <input>. When you said straight out 'can't be done' this made me look back more thoroughly at the original examples HTML. Thanks so much for clearing that up and sorry for wasting time on a very simple answer - at the very least I've now learned a limitation of append(). Chur! — thatsHeavyDoc
– thatsHeavyDoc, Commented Dec 17, 2016 at 7:18

w411 3 · Accepted Answer · 2016-12-17 07:09:33Z

1

That's happening because, input can't contain any other html tags. Wrap the input with a div and append your elements inside that div. Code example:

<h1>Here are my paragraphs</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<form>
  <div class="wrapper">
   <input value="(enter text here)">
  </div>
</form>

Then the jquery:

var $group = $(".wrapper");
$group.append("<br><p>TEST TEST TEST</p>");

answered Dec 17, 2016 at 7:09

w411 3

3,1492 gold badges21 silver badges21 bronze badges

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

1 Comment

thatsHeavyDoc Over a year ago

Ha ha, yeah I just realised this now when it became known that <input> cannot be appended. Thanks, I appreciate the prompt response.

Gnana Sekar.J · Accepted Answer · 2016-12-17 07:16:31Z

0

Actually your jquery code still works fine. inspect the input element in chrome debugger you can see that TEST TEST TEST is appended between the input tages that you have in your html. chrome debugger image

The reason it is not rendered up in the page because we cannot have these elements within input tag

answered Dec 17, 2016 at 7:16

Gnana Sekar.J

114 bronze badges

1 Comment

thatsHeavyDoc Over a year ago

Ah, cool. That explains why I cannot do it to <input> specifically. Thanks for elaborating - it makes a lot more sense now.

Saumya Rastogi · Accepted Answer · 2016-12-17 07:17:24Z

0

You can wrap a div around the input inside the form like this:

$(function() {

	'use strict';
  var $group = $(".group");
  $group.append("<br><p>TEST TEST TEST</p>"); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Here are my paragraphs</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<form>
  <div class="group">
    <input value="(enter text here)">
  </div>
</form>

Hope this helps!

answered Dec 17, 2016 at 7:17

Saumya Rastogi

13.8k5 gold badges45 silver badges45 bronze badges

3 Comments

thatsHeavyDoc Over a year ago

Just found that out now, feel quite the fool for what seems kind of obvious now. Appreciate the response, thanks!

Saumya Rastogi Over a year ago

@thatsHeavyDoc - If you find this answer correct and helpful then accept & upvote this answer as it motivates me to give answers to other questions like this and helps others to quickly find the correct answer!

Saumya Rastogi Over a year ago

:D Don't worry, you'll soon build your reputation. No problem!

Collectives™ on Stack Overflow

jQuery not recognising input element

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related