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节点替换方法：

使用香草JavaScript，您可以仅使用outerHTML()属性以字符串形式检索元素，并使用replace()方法将“ img”替换为“ div”，然后替换{{1 }}元素与DOM中带有<img>的元素（不确定为什么，因为div不能真正利用<div>属性），只需将分配给src变量的当前检索到的字符串转换为使用createContextualFragment()的DOM节点，然后使用replaceNode()方法将DOM中的div节点替换为img节点。

检查并运行以下代码段，或打开此JSFiddle以获取上述方法的实际示例：

div

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

img.parentNode.replaceChild(newDiv, img);

NB 。您将不得不检查代码段沙箱或JSFiddle沙箱，以将 <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">元素替换为<img/>元素。

克隆属性方法：

执行此操作的另一种方法（从上述Barmar的jQuery解决方案中得到了这个想法）将是创建一个新的div元素，然后使用以下命令将<div>元素的属性克隆到新的<img>元素中attributes属性和setAttributes()方法，如下所示：

<div>

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

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

img.parentNode.replaceChild(newDiv, img);

N.B。同样，您将不得不检查代码段沙箱或JSFiddle沙箱，以将<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">元素替换为<img/>元素。

Answer 2

尝试

a101

您应该设置属性宽度以可视化div。

Answer 3

您不能使用.html()来获取元素本身的HTML。而且即使可以，由于您将HTML放在<div>和</div>之间，因此它会将图像嵌套在DIV中（就像.wrap()一样），而不是将图像属性放入DIV本身。

您需要创建DIV元素并将属性复制到其中。

$('img').replaceWith(function() {
  return $("<div>", {
    "class": $(this).attr("class"),
    css: {
      "background-image": `url(${$(this).attr("src")})`
    }
  });
});

div.media-1200px {
  width: 1200px;
  height: 100px;
}

<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">

jQuery用一个HTML标签替换为另一个

3 个答案:

DOM节点替换方法：

克隆属性方法：