如何在 .html 标记内附加 jQuery 变量值

Posted 2023-05-08

【中文标题】如何在 .html 标记内附加 jQuery 变量值

【英文标题】：How to append a jQuery variable value inside the .html tag

【发布时间】：2013-11-09 22:04:37

【问题描述】：

我有一个 jquery 变量，其中包含动态创建复选框的 html 标签。 现在根据我的需要，我必须在 jquery 的 .html 标记中添加这个变量，以在对话框中显示复选框。我的 .html 包含表单标记，以在表单中包含复选框代码。。

这是我的变量，其中包含 html 标签..

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 />

这是我的 .html 标记，其中包含表单 ..

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

我尝试添加像 +chbx+ 这样的变量，但它没有发生并显示空对话框..

【问题讨论】：

您应该将 html 插入特定的选择器/id/class/object。我不确定，但 $('') 是什么意思！！试试我的回答，我只是用 id 插入了 html。

@codeSpy $('') 是我的选择器，我只需要在其中插入 chbx

【参考方案1】：

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

【讨论】：

非常感谢先生的回复，请先生告诉我如何在此行中使用此代码 $dialog = $('').html('

我试图插入 var $dialog = $('').html("

请看先生，我用对话框的实际代码更新了帖子

这应该可以帮助您在对话框中添加表单。 jsbin.com/aqaji3/1/edit

在jquery变量中使用long html有什么坏处吗？

【参考方案2】：

看到这个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);