jQuery append - what am I doing wrong?

Question

I am just struggling beyond belief with jQuery. I have looked at dozens of ways of adding a new input field but keep getting stuck right at the beginning. I don't see how this could be simpler.

<div class="container">
<p>If you click on me, I will disappexxxxxxar.</p>
<p id="thisone">Click this onexxxx me away!</p>
<p id="thixxsone2">Click 2pppp22222hover me too!</p>
    <input type="checkbox" id="chk">
</div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> window.jQuery||document.write("<script src='../vendor/jquery/jquery-1.11.3.min.js'><\/script>")</script>
<script src="../vendor/bootstrap/js/bootstrap.js"></script>
<script src="../custom/js/custom.js"></script>

<script>
$("#chk").on("change",function(){
        $("#chk").append('<input type="text" />');
    }
)
</script>

I will be adding a if ($("#chk").is(":checked")) which seems to work fine.

I went through W3 jQuery but it was too short. Anyone know of another online "course"?

Answer 1

1st: what this line expect to do??

<script> window.jQuery||document.write("<script src='../vendor/jquery/jquery-1.11.3.min.js'><\/script>")</script>

2nd: good to wrap your code after document ready .. and you can use .append for your input parent() .. this will append new input after checkbox input

<script>
$(document).ready(function(){
  $("#chk").on("change",function(){
    if($(this).is(":checked")){
        $(this).parent().append('<input type="text" />');
    }     
  });
</script>

Answer 2

With the help of an old StackOverflow question( onClick add input field ), I wrote an example that uses jquery append and works:

Html

<button id="add">Add input field</button><p id="main"></p>

js

$('#add').on('click', function () {
$('#main').append('<input type="aText" id="aText"><br>');
});

https://jsfiddle.net/uhhr60pj/ Hope that helps.

Answer 3

You have one main problem with your code in your question:

$("#chk").on("change",function(){
  $("#chk").append('<input type="text" />');
});

The problem is that an <input> is a void element:

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The following is a complete list of the void elements in HTML:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

_{Citation: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements , accessed 01:00, 2015-11-23.}

Because jQuery – almost always – fails silently it never alerts you to the fact that you're trying to achieve the impossible (literally: the impossible); so instead you have to append the elements elsewhere, such as after (or before) the given element.

 // bind the anonymous function of the // on() method to handle the change // event of the '#chk' element: $('#chk').on('change', function() { // on the assumption you only want // to append elements when the element // is in fact checked: if (this.checked) { // creating the <input> element: $('<input />', { // setting its 'type' attribute/property: 'type': 'text', // setting its 'placeholder' attribute: 'placeholder': 'input number: ' + $('input[type=text]').length // inserting the <input> after the '#chk' element: }).insertAfter(this); } }); 

 input { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <!-- I removed the irrelevant HTML --> <label>Click to add a new input element (when checked): <input type="checkbox" id="chk"> </label> </div> 

As you can see when you check the check-box this appends the new <input> directly after that check-box. Since I don't expect that's what you want to do, I'd suggest amending the above, to access the parent – <div> – element:

 // bind the anonymous function of the // on() method to handle the change // event of the '#chk' element: $('#chk').on('change', function() { // on the assumption you only want // to append elements when the element // is in fact checked: if (this.checked) { // creating the <input> element: $('<input />', { // setting its 'type' attribute/property: 'type': 'text', // setting its 'placeholder' attribute: 'placeholder' : 'input number: ' + $('input[type=text]').length // appending the <input> element to the parentNode of the // '#chk' element: }).appendTo(this.parentNode); } }); 

 input { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <!-- I removed the irrelevant HTML --> <label>Click to add a new input element (when checked): <input type="checkbox" id="chk"> </label> </div> 

References:

• jQuery:
  • appendTo() .
  • insertAfter() .
  • on() .