如何使用 javascript 将 img alt src 更改为 div strong

Question

我在一个 div 中有一组图像，我真正想要对 javascript 做的是将 src 更改为<div>内的<strong> > 并删除img alt="image"

例子：

我有这个

<div class="multi-gallery-image show" id="service_preview">
    <img alt="image" src="チャイルドカット¥3000">
    <img alt="image" src="ジュニアカット">
    <img alt="image" src="ハナコカット">
    <img alt="image" src="Hair Styling">
    <img alt="image" src="Manicures">
    <img alt="image" src="Hair Coloring">
</div>

我想像这样将每个 img src 转换为<div> <strong>

<div class="multi-gallery-image show" id="service_preview">
     <div><strong>チャイルドカット¥3000</strong></div>
     <div><strong>ジュニアカット</strong></div>
     <div><strong>トップスタイリストカット</strong></div>
     <div><strong>Hair Styling</strong></div>
     <div><strong>Manicures</strong></div>
     <div><strong>Hair Coloring</strong></div>
</div>

目前我有这个

let servicePreview = document.getElementById('service_preview');
console.log(servicePreview);

结果与第二个代码相同。

如何使用 javascript 将img alt src HTML 标签更改为div strong ？ 或 jquery

Answer 1

您需要从 DOM 中获取<img>元素，然后为每个<img>创建一个<div>和<strong> ，其中<strong>的内部文本是<img>的src属性。

顺便说一句，不需要 jQuery，JS DOM API 可以很好地处理这个问题。

这是一个例子：

 const target = document.querySelector("#service_preview_divs"); const imgs = document.querySelectorAll("#service_preview img"); imgs.forEach(img => { const div = document.createElement("div"); const strong = document.createElement("strong"); strong.innerText = img.getAttribute("src"); div.appendChild(strong); target.appendChild(div); });

 <div class="multi-gallery-image show" id="service_preview"> <img alt="image" src="チャイルドカット¥3000"> <img alt="image" src="ジュニアカット"> <img alt="image" src="ハナコカット"> <img alt="image" src="Hair Styling"> <img alt="image" src="Manicures"> <img alt="image" src="Hair Coloring"> </div> <div id="service_preview_divs"></div>