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

Question

I have a group of images inside a div, what I really want to do with javascript is change the src to <strong> inside <div> and delete the img alt="image"

example:

I have this

<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>

and I want to transform each img src to <div> <strong> like this

<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>

at the moment I have this

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

and the result is the same as the second code.

How can I change img alt src HTML tags to div strong using javascript? or jquery

Answer 1

You need to get the <img> elements from the DOM, then create a <div> and <strong> for each <img> where the inner text of the <strong> is the src attribute of the <img> .

No need for jQuery by the way, the JS DOM API can handle this just fine.

Here's an example:

 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>