将html元素添加到div中

Question

我有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？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用append()代替html()

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

<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>

Answer 3

使用append代替html

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