js原生创建元素createElement,动态插入js

1. 创建元素 document.createElement()
   document.createElement() 一个参数元素标签名称或者包含属性的完整标签字符串

const div = document.createElement('div')
div.id = 'test'   // 设置元素id
div.className = 'test'  // 设置元素class
// 等价如下
const div = document.createElement("<div id='test' class='test'></div>")
document.body.appendChild(div)  // 插入到body元素最后
document.body.insertBefore(div) // 插入到body元素最前面
document.body.replateChild(div) // 替换掉body内所有元素

2. 动态插入script

 const script = document.createElement('script')
 script.type = 'text/javascript'
 script.src = 'test.js'
 document.body.appendChild(script)
 // 等价
 document.write("<script src='test' type='text/script'><\/script>")

3. 动态插入样式 style

 const link = document.createElement('link')
 link.rel = 'stylesheet'
 link.type = 'text/css'
 const head = document.getElementByTagName('head')[0]
 head.appendChild(link)