JS动态创建 scirpt，div

洋哥登陆

已于 2023-07-15 10:22:22 修改

阅读量636

点赞数

分类专栏： html 文章标签： javascript 前端 html

于 2023-04-20 21:31:26 首次发布

本文链接：https://blog.youkuaiyun.com/Peanutfight/article/details/130275687

版权

html 专栏收录该内容

7 篇文章

订阅专栏

文章目录

- 1. 动态创建 scirpt 语句
- 2. 动态创建 div 语句

1. 动态创建 scirpt 语句

function loadGa () {
  // 获取head标签，默认位置为0
  var head = document.getElementsByTagName('head')[0]

  // 创建script元素
  var scriptUrl = document.createElement('script')
  // 设置为异步
  scriptUrl.setAttribute('async', true)
  // 创建script语句,添加到src中
  let url = 'https://www....' 
  scriptUrl.src = url
  // 添加到head标签中
  head.appendChild(scriptUrl)
  
  // 创建script语句，多行使用 '\' ，注意语句结尾';'不能省略
  var scriptValue = document.createElement('script')
  let inner = "window.dataLayer = window.dataLayer || []; \
              function gtag(){dataLayer.push(arguments);} \
              gtag('js', new Date()); \
      "
  scriptValue.innerHTML = inner
  // 添加到head标签中
  head.appendChild(scriptValue)
}

2. 动态创建 div 语句

<html>
<body>
	<!-- div容器 -->
	<div id="container"></div>
	
	<script>
		function loadHtml () {
		  // 获取容器
		  var container = document.getElementById('container')
		  // 创建div，设置属性值
		  var ad_div = document.createElement('div')
		  ad_div.setAttribute('id', Id)
		  ad_div.setAttribute('style', 'min-width: 300px; min-height: 250px; text-align: center;')
		  // 添加点击事件
		  ad_div.onclick = handleClick
		  container.appendChild(ad_div)
		  
		  // 创建script
		  var script = document.createElement('script')
		  script.innerHTML = "js语句"
		  // script添加到div中
		  ad_div.appendChild(script)
		  // 重新添加到容器
		  container.appendChild(ad_div)
			
		  // 移除子节点
		  container.removeChild(ad_div)
		}
		function handleClick(){
			console.log('点击成功')
		}
	</script>
</body>
</html>