jquery将多个元素附加到一个div

Question

我是使用 jquery 的新手，我正在尝试将多个元素附加到一个 div，但我似乎无法将元素附加到我想要的 div 中。

/** Dummy text start **/
var sender = "Sender Name";
var messageContent = "message content here";
var sent_at = "time here"
/** Dummy text end **/

var $chatlog = $('#chatlog');
var $div = $('<div />', { 'class': 'alert alert-secondary' });
var $sender = $('<strong />', { text: sender + ':' });
var $br = $('<br />')
var $message = $('<div />', { text: messageContent });
var $time = $('<small />', { class: 'pull-right', text: sent_at });
        
$chatlog.append($div.append($sender).append($br).append($message).append($time));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div id="chatlog"></div>

我不知道该怎么做，或者有我不知道的更好的方法吗？

Answer 1

在 css bootstrap.min.css (4.5.2) 中没有类 pull-right - 有一个类 float-right 这就是你想要的。

另外，你需要改变$time的位置，让它出现在消息的顶部而不是在消息之后：

/** Dummy text start **/
var sender = "Sender Name";
var messageContent = "message content here";
var sent_at = "time here"
/** Dummy text end **/

var $chatlog = $('#chatlog');
var $div = $('<div />', { 'class': 'alert alert-secondary' });
var $sender = $('<strong />', { text: sender + ':' });
var $br = $('<br />')
var $message = $('<div />', { text: messageContent });
var $time = $('<small />', { class: 'float-right', text: sent_at });
        
$chatlog.append($div.append($time).append($sender).append($br).append($message));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div id="chatlog"></div>