[英]JQuery replaceWith one HTML tag with another
I have a img
tab as below:我有一个
img
选项卡,如下所示:
<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
I use .replaceWith() $(this).replaceWith("<div>" + $(this).html() + "</div>");
我使用 .replaceWith()
$(this).replaceWith("<div>" + $(this).html() + "</div>");
and expect a code like below:并期待如下代码:
<div class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" </div>
But somehow I got:但不知何故我得到了:
<div></div>
Please take a look at my code:请看一下我的代码:
$('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">
With vanilla JavaScript, you can just use the outerHTML() attribute to retrieve the element as a string and just replace "img" with "div" using the replace() method and then replace the <img>
element with your <div>
in your DOM (not really sure why since div can't really utilise the src
attribute) by just converting your current retrieved string assigned to the div
variable to a DOM Node using the createContextualFragment() and then using the replaceNode() method to replace the img
node with the div
node in your DOM.使用 vanilla JavaScript,您只需使用outerHTML()属性将元素作为字符串检索,只需使用replace()方法将“img”替换为“div”,然后将
<img>
元素替换为您的<div>
您的 DOM(不确定为什么,因为 div 不能真正利用src
属性),只需使用createContextualFragment()将当前检索到的分配给div
变量的字符串转换为 DOM 节点,然后使用replaceNode()方法替换img
节点与 DOM 中的div
节点。
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:检查并运行以下代码片段或打开此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">
NB You will have to inspect the Code Snippet sandbox or the JSFiddle sandbox to see the <img/>
element replaced with the <div>
element.注意您必须检查代码片段沙箱或 JSFiddle 沙箱才能看到
<img/>
元素替换为<div>
元素。
Another way to do this (got this idea from Barmar's jQuery solution above) would be to create a new div element and just cloning the attributes from the <img>
element to the new <div>
element using the attributes property and setAttributes() method like this:另一种方法(从上面 Barmar 的 jQuery 解决方案中得到这个想法)是创建一个新的 div 元素,然后使用attributes属性和setAttributes()方法将
<img>
元素的属性克隆到新的<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);
<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
NB Again, you will have to inspect the Code Snippet sandbox or the JSFiddle sandbox to see the <img/>
element replaced with the <div>
element. NB同样,您必须检查代码片段沙箱或 JSFiddle 沙箱才能看到
<img/>
元素替换为<div>
元素。
try with this试试这个
$('img').each(function() {
$(this).replaceWith("<div with="100px"> + $(this).html() + "</div>");
});
you should set attribute width to visualize a div.你应该设置属性宽度来可视化一个 div。
You can't use .html()
to get the HTML of the element itself.您不能使用
.html()
来获取元素本身的 HTML。 And even if you could, since you're putting the HTML between <div>
and </div>
, it would nest the image inside the DIV (like .wrap()
does) rather than put the image attributes into the DIV itself.即使可以,因为您将 HTML 放在
<div>
和</div>
,它会将图像嵌套在 DIV 中(就像.wrap()
那样),而不是将图像属性放入 DIV 本身。
You'll need to create the DIV element and copy the attributes to it.您需要创建 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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.