jquery动态创建内容答案

【问题标题】：Jquery dynamically create contentjquery动态创建内容
【发布时间】：2013-10-01 07:21:43
【问题描述】：

这是我的代码的摘录

 $("#temp").append('<div class="dynamic">' );
    $("#temp").append(a[i]);
    $("#temp").append("</div>");

此内容在 for 循环中，并动态地将元素添加到 id 为 temp 的 div。

我认为它应该产生的是

<div id="temp">

.....
<div class="dynamic">
Education //value of a[i]
</div>
....


</div>

但它到底是什么产生的

<div id="temp">

    <div class="dynamic"></div>

    Education

正如萤火虫所证实的那样。因此，我的 css 样式就崩溃了。

你能调查一下吗？谢谢

【问题讨论】：

【解决方案1】：

用 jQuery 创建元素应该像这样：

$('<div />', {'class': 'dynamic', text: a[i]}).appendTo('#temp');

【讨论】：

@Wanna_be_Coder 如果你有正确的解决方案，然后选择它作为答案
为什么class 用引号括起来，而text 不是？可以是任何一种方式吗？还是仅仅因为class 是关键字？这种语法的任何示例都带有稍微复杂的标记，例如带有额外的子元素？
@JonathanWood - 是的，class 是 javascript 中的保留关键字，这就是它被引用的原因。这是一个稍微复杂一点的例子 -> jsfiddle.net/421qd4n7/1

【解决方案2】：

试试这个循环，我想你的问题已经解决了......

var data = "<div class='dynamic'>" + a[i] + "</div>";
$("#temp").append(data);

【讨论】：

【解决方案3】：

使用

var data = '<div class="dynamic">' + a[i] + '</div>';
$("#temp").append(data);

当您附加 $("#temp").append('<div class="dynamic">' ); 时，会创建并关闭一个 div。

当您附加$("#temp").append(a[i]); 时，它会附加在div 之后

【讨论】：