如何更改 <img> 标签的内部 html？

Question

正在输出：

<img width="1080" height="1080" src="/image.jpg" class="post-image" alt="image" />

我需要将其更改为：(src → data)

<img width="1080" height="1080" data="/image.jpg" class="post-image" alt="image" />

Answer 1

您可以使用 jQuery 的 attr 和 removeAttr 到 get、set 和 remove 属性。

var img = $("img");
img.attr("data", img.attr("src")).removeAttr("src");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img width="1080" height="1080" src="/image.jpg" class="post-image" alt="image" />

Answer 2

只需使用下面的简单 JQ :

首先获取 src 然后将其添加为 data ，然后删除 src

var src = $("img").attr("src")
$("img").attr("data", src).removeAttr("src")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img width="1080" height="1080" src="/image.jpg" class="post-image" alt="image" />

如何更改 <img> 标签的内部 html？

How to change inner html of an <img> tag?

html

jquery

image

attr