How to append div element after image tag using jquery?

Question

I have used jquery to append span element after image tag. But the span element showing inside the image tage. I am moving the caption from one place to another so if i use insertafter it gets dulicated on another place. Please check with the following code and guide me to solve this

$(".wf_captionfirst").appendTo($("#articlespace img"));

Output shows

<img src="" ><span class="wf_captionfirst">adsfasdff</span></img>

Just use $("<span class='wf_captionfirst'>adsfasdff</span>").insertAfter("img"); — Elyas Behroozizade
– Elyas Behroozizade, Commented Mar 18, 2020 at 13:17

Jerdine Sabio · Accepted Answer · 2020-03-18 13:26:01Z

1

You should use .insertAfter(). This will insert the selected element after each img.

$(".wf_captionfirst").insertAfter($("#articlespace img"));

If you want to insert at one img then you could use pseudo selectors;

$(".wf_captionfirst").insertAfter($("#articlespace img:first-of-type"));

or specify by ID or Class;

$(".wf_captionfirst").insertAfter($("#articlespace .imageContainer"));
$(".wf_captionfirst").insertAfter($("#articlespace #imageContainer"));

insertAfter doesn't duplicate the element IF there is only 1 target. Demo:

$(document).ready(function() {
  $(".move").click(function() {
    $(".moveMe").insertAfter(".A");
  });
});

.A {
  padding: 40px;
  border: 1px solid blue;
}

.B {
  padding: 40px;
  border: 1px solid red;
}

.moveMe {
  padding: 2px;
  border: 1px solid black;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="move">Move</button>

<div class="moveMe">
  Test
</div>

<div class="A">

</div>

<div class="B">

</div>

edited Mar 18, 2020 at 13:26

answered Mar 18, 2020 at 13:14

Jerdine Sabio

6,0052 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jack Over a year ago

I am moving the caption from one place to another so if i use insertafter it gets dulicated on another place

Jerdine Sabio Over a year ago

I don't understand what you mean by duplicate. I updated the answer with a demo, it doesn't duplicate it.

jack Over a year ago

ACtually i m using insertafter but the element remain on that place and insert after works also. Both are showing

Jerdine Sabio Over a year ago

@jack Include your full HTML. We don't know where .wf_captionfirst is located.

jack Over a year ago

<div id="articlespace"> <img src="img/testw.jpg"></div> <p><span class="wf_caption" style="margin-left: 9px; float: right; margin-bottom: 9px; max-width: 400px; display: inherit;"><img src="/images/asdfasdf-asdfasdf.jpg">asdfasdfasfdasdf</span></p>

|

Collectives™ on Stack Overflow

How to append div element after image tag using jquery?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related