插入元素的方式有三种
-
document.write()
这个方法如果在页面加载完成后使用，会清空整个页面的内容。如果在加载完成后使用，会在页面最后添加。
-
innerHtml()
这个方法可以用来插入内容，也可以插入元素。插入的内容或元素默认会替代原有内容
-
createElement(), appendChild()
使用createElement方法创建元素会返回一个元素对象， 使用appendChild方法插入到父元素中。 这种方法不会清空原有内容。
var boxObj = document.getElementById('box'); var ulObj = document.createElement("ul"); boxObj.appendChild(ulObj);
案例“一闪一闪亮晶晶”
效果： 点击按钮，随机出现星星，形成闪烁效果
原理： 使用定时器循环执行生成星星得代码，每次产生新的星星前删除原有得星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #dv {
width: 600px; height: 600px; background-color: black; border: 2px solid yellow; } span {
position: absolute; color: yellow; font-size: 30px; } </style>
</head>
<body>
<input type="button" id="start" value="闪起来">
<div id="dv"></div>
<script> document.getElementById('start').addEventListener('click',function () {
setInterval(function () {
var x = parseInt(Math.random()*600); var y = parseInt(Math.random()*600); var dvObj = document.getElementById('dv'); dvObj.innerHTML = '<span>★</span>'; dvObj.firstElementChild.style.left = x+'px'; dvObj.firstElementChild.style.top = y+'px'; },10) },false) </script>
</body>
</html>
今天的文章js页面添加元素_js对象添加元素「建议收藏」分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/79267.html
