Add html elements into div

Question

I've got 3 nested divs.

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

I need to add html via jQuery./ So I use

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

But when I do that the innerWrapper and inner divs disappears. How can I add <img src="profile.png"/> instead of replacing the divs inside wrapper?

Use `append()`. `$('#wrapper').append('');` or `prepend()` if you want it before the `innerWrapper` — Tushar, Aug 26 '15 at 10:18
`$('#wrapper').append('');` - There are multiple methods to do it.. but it really depends on where you want the new element to be added to — Arun P Johny, Aug 26 '15 at 10:18

score 0 · Accepted Answer · answered Aug 26 '15 at 10:19

you need to use .appand() instead of .html(), .html() will remove the previous elements.

$('#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>

score 0 · Answer 2 · answered Aug 26 '15 at 10:19

Use append() instead of 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>

score 0 · Answer 3 · edited Aug 26 '15 at 10:24

0

Use append instead of html

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

edited Aug 26 '15 at 10:24

Nagaraj S

12,994
6
31
51

answered Aug 26 '15 at 10:19

asim-ishaq

2,170
5
29
55

Add html elements into div

3 Answers3