js操作dom元素

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