Adding a label with div using Jquery

Question

Im trying to add a div element that contains a label but it does not work

Can you please let me know how to fix it? My fiddle

html

<div id="first-tab">

js

$(document).ready(function(){
   $( "#first-tab" ).append("<div><label for="name">Test</label></div>")

})

Answer 1

Working demo :) http://jsfiddle.net/d5Lqs/

• if you keen: jquery .html() vs .append()

Issue use ' doubles quotes were not used correctly.

code

$(document).ready(function(){
   $( "#first-tab" ).append('<div><label for="name">Test</label></div>');

});

Answer 2

In case of jQuery when you use any HTML tag inside a method you enclose it in double quotes like this

 "<div>Anything.....</div>"

Inside these double quotes if you again use double quotes like this

"<div id="divSection" class="newClass">Anything.....</div>"

then editor wont recognize the double quotes of id divSection and class newClass.

There are number of ways you can solve this, One of the way like using single quote inside double quote as below

"<div id='divSection' class='newclass'>Anything.....</div>"

But using this will give SPCAF error if you follow coding standard given by Microsoft as "UseConsistentOfQuotationMarks" So this is the be best way

$(document).ready(function(){$("#section").append("<div><label for=\"name\">Test</label></div>");});

Here whenever there is a double quotes inside double quotes prefix the inner double quote with a "forward slash" like above

Answer 3

Fix your quotes:

$("#first-tab").append("<div><label for='name'>Test</label></div>")

Answer 4

You have a couple of issues - you need to close the <div></div> and use single quotes, or escape the double quotes, in your JavaScript.

$(document).ready(function(){
   $( "#first-tab" ).append("<div><label for='name'>Test</label></div>")
});

See it working in the updated jsFiddle.

Answer 5

You already doing it right. Just change a little bit like:

 $(document).ready(function(){
    $( "#first-tab" ).append("<div><label for='name'>Test</label></div>")

});

Here I have change "name" to 'name', which renders the wrong html.

Answer 6

Wouldn't it be the same thing to use something like this? It changes the insides of the element with the ID of first-tab.

document.getElementById('first-tab').innerHTML = "<div><label for='name' >TEST</label></div>";

Here is the fiddle