How to add HTML append javascript... "quotation marks" problems

Question

I'm trying to transform div content from img to div strong

for example

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

I want to transform to 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>

I have this but the result is different as expected:

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

but the result of this is

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

I want to delete that "quotes" on every div strong, that is a string.
I have to delete the complete img tag after solve the "quotes" problem

Jejun · Accepted Answer · 2021-04-14 00:48:21Z

2

use createElement to create dom element to appendChild and removeChild to remove elements.

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>

edited Apr 14, 2021 at 0:48

answered Apr 14, 2021 at 0:23

Jejun

4003 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andre Over a year ago

thanks! I changed document.getElementsByTagName('img') to servicePreview.getElementsByTagName('img') to avoid to return all url images

charlietfl · Accepted Answer · 2021-04-14 00:22:51Z

1

Unlike jQuery append() the native method treats html strings as text

Use insertAdjacentHTML(position, html) instead

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>

answered Apr 14, 2021 at 0:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Alexandru Cardas · Accepted Answer · 2021-04-14 00:26:49Z

1

In raw JavaScript I believe its something like this.

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

answered Apr 14, 2021 at 0:26

Alexandru Cardas

111 bronze badge

Comments

Ignacior · Accepted Answer · 2021-04-14 00:29:39Z

1

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);
}

answered Apr 14, 2021 at 0:29

Ignacior

9576 silver badges15 bronze badges

Comments

Mister Jojo · Accepted Answer · 2021-04-14 00:47:22Z

simply use replaceChild() method

there is a trap with img.src because you get an 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>

Collectives™ on Stack Overflow

How to add HTML append javascript... "quotation marks" problems

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related