Javascript jQuery中append和html的区别

对于jQuery，

html（）

和

append（）

有什么区别 因为如果我使用

append（）

它会在下一行显示我的数据，而如果我使用

html（）

它只会覆盖显示的第一个数据

现在我想要的是

html（）

的函数，但是在下一行中显示它，而不是覆盖以前显示的数据，如果以前的数据已经显示，它将只突出显示它，而不是在下一行中添加它。这是我的javascript代码

html2 += '<div class="rightcontainer">';
html2 += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>';
html2 += '<div id="imagedetail">';
html2 += '<span class="details">Product Type:' + flsSites[index].serial_number +'</span>';
html2 += '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>';
html2 += '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>';
html2 += '<span class="details">Site name / manufacturer</span>';
html2 += '<span class="details">Selling Sales Eng</span>';
html2 += '</div>'
html2 += '</div>';
$('#resultcontainer').append(html2);
$('.rightcontainer').eq($(this).index()).addClass('background');

html2+=''；
html2+=''；
html2+=''；
html2+='产品类型：'+flsSites[索引]。序列号+''；
html2+=‘版本/大小’；
html2+=‘预计年度支出’；
html2+=“站点名称/制造商”；
html2+=‘销售工程师’；
html2+=“”
html2+=''；
$（'resultcontainer'）.append（html2）；
$（'.rightcontainer'）.eq（$（this.index（））.addClass（'background'）；

谢谢

$（el）.html（）

替换选择器中的所有内容

 <div class="el">
      <!-- Everything here gets replaced -->
 </div>

 <!-- appends it here -->
 <div class="el">
      [...]
 </div>

 <div class="el">
      [...]
 </div>
 <!-- appends it here -->

$（el）.prepend（）将选择器置于开头

 <div class="el">
      <!-- preprend it here -->
      [...]
 </div>

$（el）.after（）将外部置于选择器之后

 <div class="el">
      <!-- Everything here gets replaced -->
 </div>

 <!-- appends it here -->
 <div class="el">
      [...]
 </div>

 <div class="el">
      [...]
 </div>
 <!-- appends it here -->


[...]
请添加您的代码使用
.after（）
$（'#'）。html（）将完全替换选择器对应的标记内的内容$（“#”）.append（）只会附加到标记内内容的末尾。这是stackoverflow添加和显示代码中的已知问题。但是，是的，您可以使用.innerHTML来完成。您只需将该值连接起来，而不仅仅是将其插入
append（）
是在最后添加innerHTML/children元素，而不是在元素之后。这将是
after（）
函数的工作。是的，我更正了oninross的答案，现在请不要否决投票