Question

我用这个

$("#containerSeparateChart").prepend("<div class="+ key +"></div>")

创建动态div当我单击按钮时依赖于键我创建了类的名称，但现在我想再添加一个类，例如col-xs-6

我试试这个

$("#containerSeparateChart").prepend("<div class="+ key +"col-xs-6"+"></div>")

这个添加了类，但是像class="keynamecol-xs-6"一样，我希望在这个名称之间留一个空格class="keyname col-xs-6"

我尝试使用所有这个选项

$("#containerSeparateChart").prepend("<div class="+ key +" col-xs-6"+"></div>")
$("#containerSeparateChart").prepend("<div class="+ key +" col-xs-6"+"></div>")
$("#containerSeparateChart").prepend("<div class="+ key + " "+"col-xs-6"+"></div>")

但是所有这些情况都会产生类似这样的东西

class="keyname" "col-xs-6"

知道我做错了什么！

提前感谢！

Answer 1

<强> jQuery的：

var child = $('<div>').addClass(key + ' col-xs-6')
$("#containerSeparateChart").prepend(child)

没有jQuery：

var child = document.createElement('div');
child.classList.add(key)
child.classList.add('col-xs-6');

document.querySelector("#containerSeparateChart").appendChild(child)

es6 jQuery：

$("#containerSeparateChart").prepend(`<div class="${key} col-xs-6"></div>`)

Answer 2

您的报价只是一个小问题：

$("#containerSeparateChart").prepend('<div class="' + key + ' col-xs-6"></div>');

示例： https://jsfiddle.net/qv49p1az/1/

旁注：如果您还没有，我建议您使用代码编辑器（IDE），例如Atom（http://atom.io）。大多数现代编辑通常都会接受这样的语法错误。

Answer 3

使用此：

$("#containerSeparateChart").prepend('<div class="' + key + ' col-xs-6"></div>');

您需要替换引号以正确连接变量key。无需使用不间断的空间来分隔类 - 只需一个简单的空白区域即可。

Answer 4

$("#containerSeparateChart").prepend('<div class="' + key + ' col-xs-6"></div>')

ES2015：

$("#containerSeparateChart").prepend(`<div class="${key} col-xs-6"></div>`)

Answer 5

你试过这个吗？

$("#containerSeparateChart").prepend("<div class="+ key +"></div>");
$('.' + key).addClass('col-xs-6');

Answer 6

您的第一种方法是正确的，但您的报价中有错误

$("#containerSeparateChart").prepend("<div class='"+ key +" col-xs-6"+"'></div>")

在前置时创建div时添加空格

6 个答案: