如何使用 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>