如何添加HTML append javascript...“引號”問題

Question

我正在嘗試將 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>

我要變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');     //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 標簽

Answer 1

使用createElement創建 dom 元素以appendChild和removeChild刪除元素。

 let servicePreview = document.getElementById('service_preview'); var myImg; var mySrc; let toPush; var elements = servicePreview.getElementsByTagName('img'); while (elements[0]) { newDiv = document.createElement('div'); newStrong = document.createElement('strong'); newStrong.innerHTML = elements[0].getAttribute('src'); newDiv.appendChild(newStrong); servicePreview.appendChild(newDiv); elements[0].parentNode.removeChild(elements[0]); }

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

Answer 2

與 jQuery append() 不同，本機方法將 html 字符串視為文本

使用insertAdjacentHTML(position, html)代替

 const str = '<div class="inserted">Test</div>' document.getElementById('one').append(str);// shows as text document.getElementById('two').insertAdjacentHTML('beforeend', str)

 .inserted{color:red}

 <div id="one"></div> <div id="two"></div>

Answer 3

在原始 JavaScript 中，我相信它是這樣的。

const services = ['チャイルドカット¥3000', 'ジュニアカット', 'ハナコカット',
  'Hair Styling', 'Manicures', 'Hair Coloring']

const preview = document.getElementById("service_preview")

services.forEach(service =>{
  const div = document.createElement("div")
  const strong = document.createElement("strong")
  strong.innerText = service
  div.appendChild(strong)
  preview.appendChild(div)
})

Answer 4

只需使用replaceChild()方法

img.src 有一個陷阱，因為你得到了一個 URI

 const servicePreview = document.getElementById('service_preview') servicePreview.querySelectorAll('img').forEach(imgElm=> { let newDiv = document.createElement('div'), newStrg = document.createElement('strong'); newDiv.appendChild( newStrg ) newStrg.textContent = imgElm.getAttribute('src') // or decodeURI( imgElm.src.split('/').pop() ) servicePreview.replaceChild( newDiv, imgElm ) })

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

Answer 5

const servicePreview = document.getElementById("service_preview");
const imageSources = [...servicePreview.children].map((img) => img.src);
console.log(imageSources);

// Remove all images
while (servicePreview.firstChild) {
  servicePreview.removeChild(servicePreview.firstChild);
}

// Add new div/strong tags
for (const imageSource of imageSources) {
  const div = document.createElement("div");
  const strong = document.createElement("strong");

  strong.textContent = imageSource;

  div.appendChild(strong);
  servicePreview.appendChild(div);
}