function addMessageToBody(chat)
{
var htmlSTR = "";
htmlSTR = "<p>another paragaraph</p>";
//htmlSTR += "<li class="left"><span class="username">Doruk</span>";
//alert(htmlSTR);
//$("#message-lists").html(main);
}<body background="Orange.png">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/jquery.nicescroll.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white border-top-green">
<div class="panel-body chat">
<div class="row chat-wrapper">
<div class="col-md-4">
<div class="compose-area">
</div>
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 550px;">
<div class="chat-list-wrapper" style="overflow-y: auto; width: auto; height: 550px;">
<ul class="chat-list" id="olasimesajlar">
<li class="text-center">
<a href="javascript:void(0);" class="btn btn-default">Olası Mesajlar</a> </li>
<li>Liste Numara 2 </li>
<li>Liste Numara 3 </li>
<li>Liste Numara 4</li>
<li>Liste Numara 5</li>
<li>Liste Numara 6</li>
<li>Liste Numara 7</li>
<li>Liste Numara 8</li>
<li>Liste Numara 9</li>
<li>Liste Numara 10</li>
<li>Liste Numara 11</li>
<li>Liste Numara 12</li>
<li>Liste Numara 13</li>
<li>Liste Numara 14</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 478.639px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
</div>
</div>
<div class="col-md-8">
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 452px;">
<div class="message-list-wrapper" style="overflow: hidden; width: auto; height: 452px;">
<ul class="message-list" id="message-lists">
<li class="text-center">
<a href="javascript:void(0);" class="btn btn-default" >Load More Messages</a>
<!-- <button id="loadmoremessages" onclick="loadMoreMessages()">Load More Messages</button> -->
</li>
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p><a href="#" class="white">....</a> .........</p>
</div>
</div>
</li>
<li class="right" id="rightside">
<span class="username">Rasim Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 secs ago
</small>
<span class="avatar tooltips" data-toggle="tooltip " data-placement="left" data-original-title="Kevin Mckoy">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div id="mesajright" class="message well well-sm">
Czczczczczczczczccz
</div>
</div>
</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 265px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 187.092px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
<div class="compose-box">
<div class="row">
<div class="col-xs-12 mg-btm-10">
<textarea name="messageinput" id="btn-input" class="form-control input-sm" placeholder="Type your message here..."></textarea>
</div>
<div class="col-xs-4" id="deneme">
</div>
<div class="col-xs-12">
<button id="sendbutton" onclick="myFunction()" class="btn btn-green btn-sm pull-right">
<i class="fa fa-location-arrow"></i> Send
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我有这个HTML和JavaScript代码。这是一种聊天应用程序。所以每次按下按钮我都想在屏幕上添加消息。我的CSS很复杂，所以我想通过JavaScript将HTML代码传递给它。的像
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p><a href="#" class="white">....</a> .........</p>
</div>
</div>
</li>
通过JavaScript动态地将此HTML代码添加/附加到 ul 部分。
我该怎么做？
答案 0 :(得分：0)
一种选择是使用innerHTML：
var element = document.getElementById('message-lists');
element.innerHTML = element.innerHTML + "<p>another paragaraph</p><li
class='left'><span class='username'>Doruk</span>";
答案 1 :(得分：0)
正如您似乎在使用jQuery，您可以这样做：
$(function(){
var htmlSTR = "<li><p>another paragaraph</p></li>";
var $ul = $('#olasimesajlar');
var $button = $('#id_of_your_button');
$button.click(buttonClickHandler);
function buttonClickHandler(){
$ul.append(htmlSTR);
}
});
答案 2 :(得分：0)
您正在使用jQuery，因此您可以像
那样执行此操作$("#message-lists").append(htmlSTR);
但是如果你的消息行（li-s）的html很大而且很难，你应该用JSON响应来做，并在客户端用js构建消息行（基于接收的数据）。另外我建议使用一些javascript模板引擎，如Mustache或Handlebars。