元素创建的三种方式详解

最新推荐文章于 2021-12-21 22:12:04 发布

杏黄的三叶草

最新推荐文章于 2021-12-21 22:12:04 发布

阅读量570

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104242085

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

元素创建的三种方式:

1.document.write(“标签的代码及内容”);

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

3.document.createElement(“标签的名字”);

在这里插入图片描述

document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

点击按钮创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common.js"></script>
    <style>
        div{
            width: 300px;
            height: 400px;
            border: 1px solid red;
            background-color: yellow;
        }
    </style>
</head>
<body>
<script>
    /*
    *元素创建的三种方式:
    *1.document.write("标签的代码及内容");
    *2.对象.innerHTML="标签的代码及内容";
    *3.document.createElement("标签的名字");
    * document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
    * */
</script>
<!--点击按钮创建列表-->
<input type="button" value="按钮" id="btn">
<div id="div"></div>
<script>
    var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
    document.getElementById("btn").onclick=function () {
        var str="<ul style='list-style: none;cursor: pointer'>"
        for(var i=0;i<names.length;i++){
            str+="<li>"+names[i]+"</li>";
        }
        str+="</ul>";
        document.getElementById("div").innerHTML=str;
         //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
        var list=document.getElementsByTagName("li");
        for(var i=0;i<list.length;i++){
            list[i].onmouseover=function () {
                this.style.backgroundColor="red";
            };
            list[i].onmouseout=function () {
                this.style.backgroundColor="";
            };
        }
    };
</script>
</body>
</html>

第三种方式创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
            cursor: pointer;
        }

        div {
            width: 200px;
            height: 400px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<script>
    /*
    * 1.创建元素
    * document.createElement("标签名")----->对象
    * 2.把创建后的子元素追加到父级元素中
    * 父级对象.appendChild(子对象)
    * 如果是循环的方式添加事件,推荐用命名函数
    * 如果不是循环的方式添加事件,推荐使用匿名函数
    * */
</script>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<!--动态创建列表-->
<script>
    var art = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
    document.getElementById("btn").onclick=function () {
        //创建ul,把ul立刻加入到父级元素div中
        var obj=document.createElement("ul");
        document.getElementById("dv").appendChild(obj);
        //动态的创建li,加到ul中
        for (var i=0;i<art.length;i++){
            var objs=document.createElement("li");
            obj.appendChild(objs);
            //设置li中间的文字内容
            objs.innerText=art[i];
            //为li添加鼠标进入事件
            objs.onmouseover = mouseoverHandle;
            //为li添加鼠标离开事件
            objs.onmouseout = mouseoutHandle;
        }
    };
    function mouseoverHandle() {
        this.style.backgroundColor="red";
    };
    function mouseoutHandle() {
        this.style.backgroundColor="";
    };
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<a href="" ></a>
<script>
    var arr=[
        {name:"百度",href:"http://www.baidu.com"},
        {name:"谷歌",href:"http://www.google.com"},
        {name:"优酷",href:"http://www.youku.com"},
        {name:"土豆",href:"http://www.tudou.com"},
        {name:"快播",href:"http://www.kuaibo.com"},
        {name:"爱奇艺",href:"http://www.aiqiyi.com"}
    ];
    document.getElementById("btn").onclick=function () {
        var tableObj=document.createElement("table");
        tableObj.border="1";
        tableObj.cellPadding="0";
        tableObj.cellSpacing="0";
        document.getElementById("dv").appendChild(tableObj);
        for(var i=0;i<arr.length;i++){
            var trObj=document.createElement("tr");
            tableObj.appendChild(trObj);
            var tdObj=document.createElement("td");
            trObj.appendChild(tdObj);
            tdObj.innerHTML=arr[i].name;
            var tdObj2=document.createElement("td");
            trObj.appendChild(tdObj2);
            tdObj2.innerHTML="<a href="+arr[i].href+" >"+arr[i].name+"</a>";
        }
    };
</script>
</body>
</html>

只创建一个子元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    /*
    * 有则删除，无则创建
    * */
    my$("btn").onclick=function () {
        //先判断有没有,有就删除,然后再创建
        if(my$("btn2")){
            my$("dv").removeChild(my$("bt2"));
        }
        var put=document.createElement("input");
        put.type="button";
        put.value="按钮";
        put.id="btn2";
        my$("dv").appendChild(put);
    };
    // my$("btn").οnclick=function () {
    //     //判断这个按钮的子元素是否存在
    //     if(!my$("btn2")){
    //         var put=document.createElement("input");
    //         put.type="button";
    //         put.value="按钮";
    //         put.id="btn2";
    //         my$("dv").appendChild(put);
    //     }
    // };
</script>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
0

收藏

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

用js模拟搜索框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> input { color: gray; ...
复制链接

扫一扫

专栏目录