简体   繁体   中英

How to append a jQuery variable value inside the .html tag

I have a jquery variable which contains html tags to create checkboxes dynamically. Now as per my need i have to add this variable inside the .html tag of jquery to show the checkboxes inside the dialogue box ..Also my .html contains form tag to include the checkboxes code inside the form..

Here is my variabel which contains the html tags..

var chbx=<input type="checkbox"   id="Mumbai" name="Mumbai" value="Mumbai" />Mumbai<br />
<input type="checkbox"   id=" Delhi" name=" Delhi" value=" Delhi" /> Delhi<br />\
<input type="checkbox"   id=" Bangalore" name=" Bangalore" value=" Bangalore" /> Bangalore<br />

And here is my .html tag containing form ..

var $dialog = $('<div></div>').html("<form id='myform'>" +chbx+ "</form>")
        .dialog({
            autoOpen: false,
            title: 'Select Sites',
            buttons: {
                "Submit": function() {  $('form#myform').submit();},
                "Cancel": function() {$(this).dialog("close");}
            }
        });

i tried to append the variable like +chbx+ but its not happening and showing empty dialogue box..

HTML :

<div id="myDiv">
    <form id="myForm">
    </form> 
</div>

jQuery :

var chbx='<input type="checkbox" id="Mumbai" name="Mumbai" value="Mumbai" />Mumbai<br /> <input type="checkbox" id=" Delhi" name=" Delhi" value=" Delhi" /> Delhi<br/><input type="checkbox" id=" Bangalore" name=" Bangalore" value=" Bangalore"/>Bangalore<br />';

$("#myDiv form#myForm").html(chbx);

//to insert dynamically created form 
$("#myDiv").html("<form id='dynamicForm'>" +chbx + "'</form>");

Demo

See this Link

HTML

<div id="products"></div>

JS

var someone = {
"name":"Mahmoude Elghandour",
"price":"174 SR",
"desc":"WE Will BE WITH YOU"
 };
 var name = $("<div/>",{"text":someone.name,"class":"name"
});

var price = $("<div/>",{"text":someone.price,"class":"price"});
var desc = $("<div />", {   
"text": someone.desc,
"class": "desc"
});
$("#products").fadeIn(1500);
$("#products").append(name).append(price).append(desc);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM