如何添加HTML附加javascript。。。“引号”问题

我正在尝试将div内容从img转换为div strong

比如说

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

我有这个，但结果与预期不同：

let servicePreview = document.getElementById('service_preview');     //parent where I am trying to introduce the src values
let myImg;
let mySrc;
let toPush;

if (servicePreview.getElementsByTagName('img').length > 0){
    let servicesNumber = servicePreview.getElementsByTagName('img').length;     //number of img tags inside the service_preview
    for (let i = 0; i < servicesNumber; i++){
        myImg = servicePreview.getElementsByTagName('img')[i];      //capturing the img tag
        mySrc = myImg.getAttribute('src');              //capturing the src value from img tag
        toPush = '<div><strong>' + mySrc + '</strong></div>';      //creating html tag for push to the parent service_preview
        servicePreview.append(toPush);                            //appending the html tag
    }
}

但结果是

<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="トップスタイリストカット">
    <img alt="image" src="Hair Styling">
    <img alt="image" src="Manicures">
    
    "<div><strong>チャイルドカット¥3000</strong></div>"
    "<div><strong>ジュニアカット</strong></div>"
    "<div><strong>ハナコカット</strong></div>"
    "<div><strong>トップスタイリストカット</strong></div>"
    "<div><strong>Hair Styling</strong></div>"
    "<div><strong>Manicures</strong></div>"
</div>

我想删除每个div strong上的引号，这是一个字符串。 我必须在解决报价后删除完整的img标签 问题

---

与jQuery append不同，本机方法将html字符串视为文本

改为使用insertAdjacentHTMLposition，html

const str='Test' document.getElementById'one'。appendstr；//显示为文本 document.getElementById'two'。insertAdjacentHTML'beforeend'，str .插入{颜色：红色} 使用createElement创建dom元素以追加Child，使用removeChild删除元素

让servicePreview=document.getElementById'service_preview'； var-myImg； var-mySrc； 让我们一起来吧； var elements=servicePreview.getElementsByTagName'img'； while元素[0]{ newDiv=document.createElement'div'； newStrong=document.createElement'strong'； newStrong.innerHTML=元素[0]。getAttribute'src'； newDiv.newstrong； servicePreview.appendChildnewDiv； 元素[0].parentNode.removeChildelements[0]； }

---

在原始JavaScript中，我相信是这样的

常量服务=['チャイルドカット¥3000', 'ジュニアカット', 'ハナコカット', “发型设计”、“修指甲”、“染发”] const preview=document.getElementByIdservice\u preview services.forEachservice=>{ const div=document.createElementdiv 常量strong=document.createElementstrong strong.innerText=服务 奇尔斯特朗分区 preview.appendChilddiv } 简易法

img.src有一个陷阱，因为您得到了一个URI

const servicePreview=document.getElementById'service\u preview' servicePreview.querySelectorAll'img'。forEachimgElm=> { 让newDiv=document.createElement'div' ，newStrg=document.createElement'strong' ; newDiv.appendChild newStrg newStrg.textContent=imgElm.getAttribute'src'//或decodeURI imgElm.src.split'/'.pop servicePreview.replaceChild newDiv，imgElm } const servicePreview=document.getElementByIdservice\u预览； const imageSources=[…servicePreview.children].mapimg=>img.src； console.logimageSources； //删除所有图像 而servicePreview.firstChild{ servicePreview.removeChildservicePreview.firstChild； } //添加新的div/strong标记 对于imageSources的常量imageSource{ const div=document.createElementdiv； const strong=document.createElementstrong； strong.textContent=图像源； 蔡德斯特朗分区； servicePreview.appendChilddiv； }

---

谢谢我将document.getElementsByTagName'img'更改为servicePreview.getElementsByTagName'img'以避免返回所有url图像

<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="トップスタイリストカット">
    <img alt="image" src="Hair Styling">
    <img alt="image" src="Manicures">
    
    "<div><strong>チャイルドカット¥3000</strong></div>"
    "<div><strong>ジュニアカット</strong></div>"
    "<div><strong>ハナコカット</strong></div>"
    "<div><strong>トップスタイリストカット</strong></div>"
    "<div><strong>Hair Styling</strong></div>"
    "<div><strong>Manicures</strong></div>"
</div>