js为页面插入元素

最新推荐文章于 2024-04-25 00:00:00 发布

随风奔跑尿飞扬

最新推荐文章于 2024-04-25 00:00:00 发布

阅读量2.5w

点赞数 7

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/q1403539144/article/details/91389666

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

插入元素的方式有三种

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>

随风奔跑尿飞扬

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js为页面插入元素

插入元素的方式有三种document.write()这个方法如果在页面加载完成后使用，会清空整个页面的内容。如果在加载完成后使用，会在页面最后添加。innerHtml()这个方法可以用来插入内容，也可以插入元素。插入的内容或元素默认会替代原有内容createElement(), appendChild()使用createElement方法创建元素会返回一个元素对象，使用a...
复制链接

扫一扫

专栏目录