1 创建元素
// 例如创建iframe标签
const iframe = document.createElement('iframe');
//创建img
const img = new Image();
img.src = '';
2 给元素条件class
iframe.classList.add('print-iframe')
3 设置style
iframe.style.width='100%'
4 设置标签属性
const linkTag = document.createElement('link')
// link标签引入css文件的地址
linkTag.href = '/static/css/schedule_task.css'
// 设置link标签属性
linkTag.setAttribute('rel', 'stylesheet')
//设置style
iframe.setAttribute("style","position:absolute;width:0;height:0;left:0;top:0;");
5 添加元素
document.body.appendChild(iframe)
6 移除元素
const iframeEL=document.querySelector('.print-iframe');
if(iframeEL){
iframeEL.remove();
}
示例:
for (const image of images) {
const newImage = document.createElement('img');
newImage.setAttribute('src', `images/${image}`);
newImage.setAttribute('alt', alts[image]);
thumbBar.appendChild(newImage);
newImage.addEventListener('click', e => {
displayedImage.src = e.target.src;
displayedImage.alt = e.target.alt;
});
}