CODEWITHSUNDEEP
jqueryhtml
thatsHeavyDoc
thatsHeavyDoc

Reputation: 43

jQuery not recognising input element

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.

Upvotes: 1

Views: 57

Answers (3)

Saumya Rastogi
Saumya Rastogi

Reputation: 13709

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!

Upvotes: 0

Gnana Sekar.J
Gnana Sekar.J

Reputation: 11

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

Upvotes: 0

w411 3
w411 3

Reputation: 3039

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>");

Upvotes: 1

Related Questions