如何使用jQuery将标签替换为动态元素

Question

我正在使用Jquery 3.4.1。我试图用动态创建的img元素替换html中的div标记。但是它总是以纯文本而不是html的形式呈现。

HTML：

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

脚本：

$.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>`)
});

当前输出：

预期输出：

以上文本html需要呈现为HTML元素。

请协助解决我的问题？

Answer 1

您需要使用$(this).而不是this.-来调用jQuery功能，而不是本机JS，而不是本机JS。

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