JQuery, create element with dynamic class

Question

I am trying to create elements with dynamic class value, so far unsuccessful. Here's code:

let sender = "alex";
let message = "testMsg";
let time = "15:30";
let msg = $('<span>')
              .append($('<span>', {class : 'timestamp'}, {text: time}))
              .append($('<p>', {class : sender}, {text: message}));

Results in the following:

<span>
    <span id="timestamp"></span>
    <p></p>
</span>

Which is confusing, because I read here that this more "elegant" way allows for variables to be used as dynamical properties. What am I missing here?

Thanks

Solved: Turns out that I tried to give 3 paramethers to .append() function. Read bellow for solutions and explanation.

There are too many errors in this code, so I guess it's not the real one. Can you build a runnable snippet ? See stackoverflow.com/help/mcve — Denys Séguret
– Denys Séguret, Commented Aug 19, 2016 at 11:56
@DenysSéguret I fixed span and added 'time' variable, only errors I can find. This is the code I am running to produce the above results. — Alex
– Alex, Commented Aug 19, 2016 at 12:02

Community · Accepted Answer · 2017-05-23 10:29:14Z

2

You were close, Here are small changes which I have done:

Specify tag properly it should be  not 
Use correct API, you can pass multiple arguments. $('', {class: 'timestamp', text: time })
Define all variables i.e. time was not defined.
should not insert a  inside a , Pointed out by @blex

let sender = "alex",
  message = "testMsg",
  time = '15:30';

let msg = $('<span>')
  .append($('<span>', {
    class: 'timestamp',
    text: time
  }))
  .append($('<p>', {
    class: sender,
    text: message
  }));

$('div').append(msg)

.alex{color:green}
.timestamp{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Aug 19, 2016 at 12:03

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Denys Séguret Over a year ago

In fact it shouldn't even be  (which works because the engine is lax but isn't valid) but 

blex Over a year ago

@DenysSéguret The jQuery documentation uses the "" syntax

Denys Séguret Over a year ago

@blex ok, that's still a terrible practice. It assumes the browsers parses invalid HTML the way you want it to do it.

Alex Over a year ago

[The snippet works, but I still don't get any class. Why would that be?] Never mind, fixed it. Thanks guys.

Mustapha Larhrouch · Accepted Answer · 2016-08-19 12:08:15Z

2

try this :

let sender = "alex";
let message = "testMsg";
let time = "15:30";
let msg = $('<span>')
                  .append($('<span>', {class : 'timestamp', text: time}))
                  .append($('<p>', {class : sender, text: message}));

https://jsfiddle.net/MostafaB/hhadxdxe/

answered Aug 19, 2016 at 12:08

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

1 Comment

Denys Séguret Over a year ago

Why another identical answer ?

Rafael Teles · Accepted Answer · 2016-08-19 12:01:30Z

0

You missplaced your second attribute (text)

var $div = $("<div>", {class: 'myClass', text: 'Some text'});
$("body").append($div)

.myClass {
  background-color: black;
  width: 50px;
  height: 50px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Aug 19, 2016 at 12:01

Rafael Teles

2,7582 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

JQuery, create element with dynamic class

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related