JQuery,使用动态 class 创建元素

JQuery, create element with dynamic class

我正在尝试创建具有动态 class 值的元素,但目前未成功。这是代码:

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

结果如下:

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

这令人困惑,因为我读到 here 这种更 "elegant" 的方式允许将变量用作动态属性。我在这里错过了什么?

谢谢

已解决:原来我试图给 .append() 函数提供 3 个参数。阅读下面的解决方案和解释。

您放错了第二个属性(文本)

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>

你很接近,这是我所做的小改动:

  1. 正确指定标签应该是<span>而不是</span>
  2. 使用正确API,可以传递多个参数。 $('<span />', {class: 'timestamp', text: time })
  3. 定义所有变量,即 time 未定义。
  4. 不应在 <span> 中插入 <p>,由 @blex
  5. 指出

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>

试试这个:

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/