创建元素的三种方式

最新推荐文章于 2023-11-06 20:05:35 发布

YanLingGe

最新推荐文章于 2023-11-06 20:05:35 发布

阅读量436

点赞数

文章标签：动画 css css3

本文链接：https://blog.csdn.net/YanLingGe/article/details/121645652

版权

一.document.write()

弊端：只能往body中添加元素

document.write('<div class="box1">我是div</div>');

二.innerHTML

弊端：在同级下只能添加一种元素，多个会覆盖

  document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

三.document.createElement()

父元素.appendChild(子元素)：给父元素末尾添加子元素

var pObj = document.createElement("p");
  divObj1.appendChild(pObj);

四.动态的创建列表

单击按钮，动态的创建无序列表，渲染在红色边框的box中.

思路：1.创建内容数组 2.获取元素，给按钮绑定单击事件 3.创建ul标签

4.将ul添加到box中 5.遍历数组 6.创建li标签 7.添加内容 8.按钮禁用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态创建列表</title>
<style>
    div {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        margin-top: 10px;
      }
</style>
</head>
<body>
    <button>按钮</button>
    <div></div>
</body>
</html>
<script>
    var list = ["11111","2222","3333","44444","5555","6666"];
    var box = document.querySelector("div");
    document.querySelector("button").onclick = function(){
        box.appendChild(document.createElement("ul"));
        for(var i=0;i<list.length;i++){
            var li = document.createElement("li");
            li.innerHTML = list[i];
            if(i==0){
                li.style.color = "blue";
            }
            li.className = "hover";
            document.querySelector("ul").appendChild(li);
        }
        this.disabled= true;
    };
</script>

YanLingGe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建元素的三种方式

一.document.write()弊端：只能往body中添加元素document.write('<divclass="box1">我是div</div>');二.innerHTML弊端：在同级下只能添加一种元素，多个会覆盖document.getElementById("divObj").innerHTML="<p>哈哈哈</p>";三.document.createElement()父元素.appendChild(...
复制链接

扫一扫