Как изменить внутренний html метки <img>?

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

просто использовать простой 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" />

Answer 2

Вы можете использовать attr и removeAttr из JQuery, чтобы 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" />