CODEWITHSUNDEEP
jqueryhtml
user3538570
user3538570

Reputation: 47

appending a div jquery

I'm trying to append a new #questionfield to the existing div #questionfield when the user clicks the button with id #add. 

<div id="questionfield">
          <div data-role="fieldcontain" data-controltype="textinput">
              <input name="" id="textinput3" placeholder="Enter question here..." value=""
              type="text">
          </div>
          <div data-role="fieldcontain" data-controltype="radiobuttons">
              <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
                  <legend>
                      Response Type:
                  </legend>
                  <input id="radio1" name="" value="radio1" data-theme="c" type="radio">
                  <label for="radio1">
                      Checkbox
                  </label>
                  <input id="radio2" name="" value="radio2" type="radio">
                  <label for="radio2">
                      Text Input
                  </label>
                  <input id="radio3" name="" value="radio3" type="radio">
                  <label for="radio3">
                      Number Input
                  </label>
              </fieldset>
          </div>
      </div>
      <a data-role="button" id="add">
          Add New Question
          <script>
                $("#add").click(function(){
                    $("#questionfield").append("<div id="questionfield"></div>");
                });
          </script>
      </a>

Upvotes: 0

Views: 177

Answers (5)

bNd
bNd

Reputation: 7640

You need to change syntax of append.

  $("#questionfield").append('<div id="questionfield1"></div>');

Edit

<a data-role="button" id="add">Add New Question</a>
<script>
    $("#add").click(function(){
        $("#questionfield").append("<div id='questionfield1'></div>");
    });
</script>

Upvotes: 3

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26153

Change this part...

<a data-role="button" id="add">
    Add New Question
    <script>
        $("#add").click(function(){
            $("#questionfield").append("<div id="questionfield"></div>");
        });
    </script>
</a>

to this...

<a data-role="button" id="add">Add New Question</a>
<script>
    $("#add").click(function(){
        $("#questionfield").append("<div id='questionfield'></div>");
    });
</script>

You had </a> after the script, which means the link didn't exist at the time that the script was trying to reference it.

Upvotes: 0

BrotherBallan
BrotherBallan

Reputation: 369

As it is, you're closing the quotes when you're trying to set the id of the element. To fix this, you could either escape the quotes in the element like:

$("#add").click(function(){ $("#questionfield").append("<div id=\"questionfield\"></div>"); });

or use single quotes for the string (or the id value):

$("#add").click(function(){ $("#questionfield").append('<div id="questionfield"></div>'); });

Also, your element's ids should be unique, so you should change id to class <div class="questionfield"></div> or set a unique id for each element (which would be more troublesome to do, in my opinion).

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

Firstly,You have used incorrect combination of quotes while appending.(You will find the error in console for same)

Second, using duplicate IDs is bad practise.

Third, make sure that you write the code in DOM ready:

$(document).ready(function(){
   $("#add").click(function(){
      $("#questionfield").append("<div id='questionfield'></div>");
   });
});

Upvotes: 0

Felix
Felix

Reputation: 38112

Since id must be unique, you can use class instead. Besides that you also need to apply quotes and double quotes properly here:

$("#add").click(function(){
    $("#questionfield").append('<div class="questionfield"></div>');
    // --------                ^ use quotes here instead of "    ^
});

Also, I'm not sure why you're putting <script></script> tag inside <a></a>. You should placed scripts at the end of your page before closing </body> tag especially when you're not wrapping youur jQuery code inside DOM ready handler $(function(){...});

Upvotes: 1

Related Questions