How to replace a tag with dynamic element using jquery

Question

I'm using Jquery 3.4.1. I'm trying to replace the img tag in my html with dynamically created div element. But it is always getting rendered as plain text instead of html.

HTML:

<p class="post-content">
    <img src="..." />
</p>

Script:

$.each($('.post-content img'), function () {
    const imgSrc = this.src;
    this.closest('p').replaceWith(`<div class="post-image"><div class="post-image-cover" style="background-image: url(${imgSrc})"></div></div>`)
});

Current Output:

Expected Output:

Above text html needs to be rendered as HTML element.

Please assist on where I'm wrong?

Have you tried using .html() and not .replaceWith(), this will maybe solve the problem you are facing. Looks like if you do $(this).closest('p').html() it works — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Mar 22, 2020 at 2:49
But I need to replace the p tag with my html. I don't want to place the element inside p tag. — fingers10
– fingers10, Commented Mar 22, 2020 at 2:55

Igor · Accepted Answer · 2020-03-22 03:37:06Z

3

You need to use $(this). instead of this. - to invoke jQuery functionality and not native JS, which works differently.

$.each($('.post-content img'), function() {
  const imgSrc = this.src;
  $(this).closest('p').replaceWith(`<div class="post-image"><div class="post-image-cover" style="background-image: url(${imgSrc})">Test replacement</div></div>`)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="post-content">
  <img src="..." />
</p>

answered Mar 22, 2020 at 3:37

Igor

15.9k1 gold badge29 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to replace a tag with dynamic element using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related