将html元素添加到div中[重复]答案

【问题标题】：Add html elements into div [duplicate]将html元素添加到div中[重复]
【发布时间】：2015-11-20 07:58:28
【问题描述】：

我有 3 个嵌套的 div。

<div id="wrapper">
   <div id="innerWrapper">
      <div id="inner"></div>
   </div>
</div>

我需要通过jQuery添加html。/所以我使用

$('#wrapper').html('<img src="profile.png"/>');

但是当我这样做时，innerWrapper 和 inner div 消失了。如何添加<img src="profile.png"/> 而不是替换wrapper 中的div？

【问题讨论】：

使用append()。 $('#wrapper').append('<img src="profile.png"/>'); 或 prepend() 如果你想在 innerWrapper 之前使用它
$('#wrapper').append('<img src="profile.png"/>'); - 有多种方法可以做到这一点.. 但这实际上取决于您希望将新元素添加到的位置

标签： javascript jquery

【解决方案1】：

您需要使用.appand() 而不是.html()，.html() 将删除之前的元素。

$('#wrapper').append('&lt;img src="profile.png"/&gt;');

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

【讨论】：

【解决方案2】：

使用append() 而不是html()

$('#wrapper').append('&lt;img src="profile.png" titile="image"/&gt;');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div id="wrapper">
   <div id="innerWrapper">innerwrapper
  <div id="inner">inner</div>
   </div>
</div>

【讨论】：

【解决方案3】：

使用append 而不是html

$('#wrapper').append('&lt;img src="profile.png"/&gt;');

【讨论】：