javascript - JQuery replaceWith 将一个 HTML 标记替换为另一个

Question

我有一个 img标签如下:

  <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

我使用 .replaceWith() $(this).replaceWith("<div>" + $(this).html() + "</div>");并期待如下代码:

  <div class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" </div>

但不知何故我得到了:

<div></div>

请看我的代码:

$('img').each(function() {
  $(this).replaceWith("<div>" + $(this).html() + "</div>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

Answer 1

DOM 节点替换方法:

使用 vanilla JavaScript，你可以只使用 outerHTML()属性以字符串形式检索元素，并使用 replace() 将“img”替换为“div”方法，然后替换 <img>元素与你的 <div>在您的 DOM 中(不太确定为什么因为 div 不能真正利用 src 属性)只需将当前检索到的字符串转换为 div使用 createContextualFragment() 变量到 DOM 节点然后使用 replaceNode()替换 img 的方法节点与 div DOM 中的节点。

检查并运行以下代码片段或打开此 JSFiddle有关上述方法的实际示例:

const img = document.querySelector("img");
const div = img.outerHTML.replace("img", "div");
let newDiv = document.createRange().createContextualFragment(div);

img.parentNode.replaceChild(newDiv, img);

 <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

注意您必须检查代码片段沙箱或 JSFiddle 沙箱才能看到 <img/>元素替换为 <div>元素。

---

克隆属性方法:

另一种方法(从上面 Barmar 的 jQuery 解决方案中得到这个想法)是创建一个新的 div 元素并从 <img> 中克隆属性。元素到新<div>使用 attributes 的元素属性(property)和setAttributes()像这样的方法:

const img = document.querySelector("img");
const newDiv = document.createElement("div");

[...img.attributes].forEach(({name, value}) =>
  newDiv.setAttribute(name, value)
);

img.parentNode.replaceChild(newDiv, img);

<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

注意同样，您必须检查代码片段沙箱或 JSFiddle 沙箱才能看到 <img/>元素替换为 <div>元素。