在添加div时添加空格

Question

I use this

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

to create dynamic div when I click a button depend on the key I create the name of the class, but now I want to add one more class for example col-xs-6

I try this

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

this add the class but, together like this class="keynamecol-xs-6" and I want a space between the name like this class="keyname col-xs-6"

I try to use all this option

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

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

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

But all this case create something like this

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

Any idea what I doing wrong!

thanks in advance!

Answer 1

jQuery:

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

Without 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

Just a small issue with your quotes:

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

Example: https://jsfiddle.net/qv49p1az/1/

---

Side note: If you are not already, I would recommend using a code editor (IDE) such as Atom ( http://atom.io ). Most modern editors would typically pick up on syntax errors like this.

Answer 3

Use this:

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

You need to alternate your quotes to properly concatenate the variable key . No need to use a non-breaking space for separation of classes - a simple white space will do.

Answer 4

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

ES2015：

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

Answer 5

Did you try this?

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

Answer 6

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

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