[英]How to add HTML append javascript... "quotation marks" problems
I'm trying to transform div content from img
to div strong
我正在尝试将 div 内容从
img
转换为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 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>
use createElement
to create dom element to appendChild
and removeChild
to remove elements.使用
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>
Unlike jQuery append() the native method treats html strings as text与 jQuery append() 不同,本机方法将 html 字符串视为文本
Use insertAdjacentHTML(position, html)
instead使用
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>
In raw JavaScript I believe its something like this.在原始 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)
})
simply use replaceChild() method只需使用replaceChild()方法
there is a trap with img.src because you get an URI
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>
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.