Web-API之创建元素的三种方式

最新推荐文章于 2021-11-09 11:16:25 发布

Cc.＇沐艿伊℡

最新推荐文章于 2021-11-09 11:16:25 发布

阅读量217

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/92850106

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

1. document.write(“标签的代码及内容”)-–>缺陷: 页面上静态结构会被全部覆盖

document.write("<p>这是一个p标签</p>");

2. 对象.innerHTML = “标签及内容”;

 my$("box").innerHTML = "<h1>大标题</h1>"

点击动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    var names = ["杨过", "小龙女", "张无忌", "张三丰"];
    my$("btn").onclick = function () {
        var str = "<ul>";
        //根据循环拼接li
        for(var i = 0 ; i < names.length ; i++){
            str += "<li>" + names[i] + "</li>";
        }
        str += "</ul>";
        console.log(str);
        my$("box").innerHTML = str;

        //当代码执行到这里, 说明列表已经创建成功
        var list = ele$("li");
    for(var j = 0 ; j <list.length ; j++){
        list[j].onmouseover = function () {
            this.style.backgroundColor = "pink";
        }
        list[j].onmouseout = function () {
            this.style.backgroundColor = "";
        }
    }
    }
</script>
</body>
</html>

3. document.createElement("标签名);

创建元素:
1. 创建—>document.createdElement(“标签名”);
2. 追加到父级元素的末尾–>父对象.appendChild(“创建的子对象”)

  var count = 0;
    my$("btn").onclick = function () {
        count++;
        var obj = document.createElement("h1")
        //设置文本内容
        obj.innerText = "标题标签"+count;
        //放到父元素的末尾
        my$("box").appendChild(obj);
    }

点击动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    var flag = true;//当成是一个开关. 默认是开着的
    my$("btn").onclick = function () {
        if(flag){
            //立马把开关关了
            flag = false;
            //1.创建ul并添加到父元素的末尾
            var ulObj = document.createElement("ul");
            my$("box").appendChild(ulObj);
            for(var i = 0 ; i < names.length ; i++){
                //创建li, 并添加到ul里面
                var liObj = document.createElement("li");
                liObj.innerText = names[i];
                ulObj.appendChild(liObj);
        }
    }
</script>
</body>
</html>

Cc.＇沐艿伊℡

关注

0
点赞
踩
0

收藏

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

1. document.write(“标签的代码及内容”)-–>缺陷: 页面上静态结构会被全部覆盖document.write("<p>这是一个p标签</p>");2. 对象.innerHTML = “标签及内容”; my$("box").innerHTML = "<h1>大标题</h1>"点击动态创建列表<!DOCTY...
复制链接

扫一扫

专栏目录