Добавить html элементы в div

Question

У меня есть 3 вложенных div.

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

мне нужно добавить HTML с помощью jQuery./ Поэтому я использую

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

Но когда я делаю что innerWrapper и inner дивы исчезает. Как добавить <img src="profile.png"/> вместо замены div внутри wrapper?

Answer 1

Вам необходимо использовать .appand() вместо .html(), .html() удалите предыдущие элементы.

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

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

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"/>');