Append new tag to
after a specific element?

Question

<div>
   <input type="text" class="form-control" />
   <i class="fa fa-camera"></i>
   <i class="fa fa-smile-0"></i>
</div>

My question is: How to append

<img src="/images/img01.png" />

to the <div> with position:

<div>
   <input type="text" class="form-control" />
   <img src="/images/img01.png" />
   <i class="fa fa-camera"></i>
   <i class="fa fa-smile-o"></i>
</div>

via jQuery?

Have you made at least ***little*** research? There's, you know, such thing as Google. — nicael, Dec 19 '15 at 17:01
Okay, http://stackoverflow.com/questions/2244605/jquery-add-element-after-another-element. — nicael, Dec 19 '15 at 17:07
[Is it really so difficult?](http://i.stack.imgur.com/MDhu8.png) — nicael, Dec 19 '15 at 17:09
@nicael ya. I think it's : How to append new tag to div tag with specific position/index? (too long for google search :)) — Tân, Dec 19 '15 at 17:11

score 2 · Accepted Answer · edited Dec 19 '15 at 17:04

2

You can use jQuery's .after():

$("div input.form-control").after("<img src='https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97100&w=200&h=100' />");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <input type="text" class="form-control" />
   <i class="fa fa-camera"></i>
   <i class="fa fa-smile-0"></i>
</div>

edited Dec 19 '15 at 17:04

nicael

18,550
13
57
90

answered Dec 19 '15 at 17:01

Alex Char

32,879
9
49
70

score 1 · Answer 2 · answered Dec 19 '15 at 17:01

1

You could use the .insertAfter() method:

$('<img src="/images/img01.png" />').insertAfter('div input.form-control');

answered Dec 19 '15 at 17:01

Josh Crozier

233,099
56
391
304

Append new tag to after a specific element?

2 Answers2

Append new tag to
after a specific element?