美文网首页H5^Study
JS基础学习:元素创建

JS基础学习:元素创建

作者: Merbng | 来源:发表于2019-04-04 22:46 被阅读0次

    元素创建的三种方式

    1.document.write("标签的代码及内容");
    2.对象.innerHTML("标签的代码及内容");
    3.document.createElement("标签的名字");

    document.write()创建元素

    • 缺陷:
      如果是在页面加载完毕后,此时通过这个方式创建元素,那么页面上的存在的所有内容都会被干掉。
    <input type="button" id="btn" value="点击">
            <script src="js/common.js"></script>
            <script>
                my$('btn').onclick = function() {
                    document.write("<p>这是一个p</p>")
                };
                document.write("<p>这是一个p</p>")
            </script>
    

    .innerHTML创建元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                    width: 200px;
                    height: 200px;
                    border: 2px solid pink;
                }
            </style>
        </head>
        <body>
            <input type="button" value="按钮" id="btn" />
            <div id="dv">
    
            </div>
            <script src="js/common.js"></script>
            <script>
                var i=0
                my$('btn').onclick = function() {
                    i++;
                    my$('dv').innerHTML = "啊啊啊,五金件案件,安慰奖阿基,哇咔咔"+i;
                };
            </script>
        </body>
    </html>
    
    

    document.createElement(""标签名字); 返回对象

    创建元素,把元素追加到父级元素中。

    <input type="button" value="按钮" id="btn" />
            <div id="dv">
    
            </div>
            <script src="js/common.js"></script>
            <script>
                my$('btn').onclick = function() {
                    var pObj = document.createElement("P");
                    setInnerText(pObj, "哇咔咔");
                    //把创建后的子元素追加到父级元素中
                    my$('dv').appendChild(pObj);
                };
            </script>
    

    案例:点击按钮创建列表

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                    width: 300px;
                    height: 300px;
                    background-color: pink;
                }
            </style>
        </head>
        <body>
    
            <input type="button" id="btn" value="创建列表">
            <div id="dv"></div>
            <script src="js/common.js"></script>
            <script>
                var names = ["哈哈", "家万佳", "我来了"];
                my$('btn').onclick = function() {
                    var str = "<ul style='list-style-type:none;cursor:pointer'>"
                    for (i = 0; i < names.length; i++) {
                        str += "<li>" + names[i] + "</li>"
                    }
                    str += "</ul>";
                    my$('dv').innerHTML = str;
                    var list = my$('dv').getElementsByTagName('li');
                    for (j = 0; j < list.length; j++) {
                        list[j].onmouseover = function() {
                            this.style.backgroundColor = "yellow";
                        };
                        list[j].onmouseout = function() {
                            this.style.backgroundColor = "";
                        };
                    }
    
                };
                
            </script>
        </body>
    </html>
    
    

    案例:创建一个图片

        <body>
    
            <input type="button" value="创建图片" id="btn" />
            <div id="dv"></div>
            <script src="js/common.js"></script>
            <script>
                my$('btn').onclick = function() {
                    my$('dv').innerHTML = "<img src='images/img1.jpg' alt='图啊'>";
                };
            </script>
        </body>
    

    案例:动态创建列表

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                div {
                    width: 200px;
                    height: 400px;
                    background-color: pink;
                    border: 1px dashed red;
                }
            </style>
        </head>
        <body>
            <input type="button" name="" id="btn" value="创建列表" />
            <div id="dv"></div>
            <script src="js/common.js"></script>
            <script type="text/javascript">
                var kunfu = ["问问", "请求", "嗯嗯", "让人", "天天", "预约", "啊啊", "哈哈", ];
                my$('btn').onclick = function() {
                    // 创建ul 把ul立刻加入到div中
                    var ulObj = document.createElement('ul');
                    my$('dv').appendChild(ulObj);
                    // 动态创建li 加入到ul中
                    for (i = 0; i < kunfu.length; i++) {
                        var liObj = document.createElement('li');
                        liObj.innerHTML = kunfu[i];
                        ulObj.appendChild(liObj);
                        
                        liObj.onmouseover=mouseoverHandle;
                        liObj.onmouseout=mouseoutHandle;
                    }
                };
                function mouseoverHandle(){
                    this.style.backgroundColor="yellow";
                }
                function mouseoutHandle(){
                    this.style.backgroundColor="";
                }
            </script>
        </body>
    </html>
    
    

    案例:动态创建表格

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <input type="button" name="" id="btn" value="创建列表" />
            <div id="dv"></div>
            <script src="js/common.js"></script>
            <script type="text/javascript">
                var webl = [{
                        name: "百度",
                        href: "http://www.baidu.com"
                    },
                    {
                        name: "搜狐",
                        href: "http://www.baidu.com"
                    }, {
                        name: "腾讯",
                        href: "http://www.baidu.com"
                    }
                ];
                my$('btn').onclick = function() {
                    var tabObj = document.createElement('table');
                    tabObj.border="1";
                    tabObj.cellSpacing="0";
                    tabObj.cellPadding="0";
                    my$('dv').appendChild(tabObj);
                    // 创建行
                    for (i = 0; i < webl.length; i++) {
                        var dt = webl[i];
                        var trObj = document.createElement('tr');
                        tabObj.appendChild(trObj);
                        // 创建第一列
                        var td1 = document.createElement('td');
                        td1.innerHTML = dt.name
                        trObj.appendChild(td1);
                        // 创建第二列
                        var td2 = document.createElement('td');
                        td2.innerHTML = "<a href='" + dt.href + "'>" + dt.name + "</a>"
                        trObj.appendChild(td2);
                    }
                };
            </script>
        </body>
    </html>
    
    

    元素相关的方法

    .appendChild("元素")//追加元素
    .insertBefore(obj,"参照的元素");//把新的子元素插入到参照的元素的前面
    .replaceChild();替换元素
    .removeChild("元素");移除元素中的一个子元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            
            <input type="button" value="显示效果" id="btn" />
            <input type="button" value="干掉第一个子元素" id="btn2" />
            <input type="button" value="干掉所有子元素" id="btn3" />
            <div id="dv"></div>
            <script src="common.js"></script>
            <script>
                var i = 0;
                my$("btn").onclick = function() {
                    i++;
                    var obj = document.createElement("input");
                    obj.type = "button";
                    obj.value = "按钮" + i;
                    //my$("dv").appendChild(obj);//追加子元素
                    //把新的子元素插入到第一个子元素的前面
                    my$("dv").insertBefore(obj, my$("dv").firstElementChild);
                    //my$("dv").replaceChild();---自己玩
                };
    
                my$("btn2").onclick = function() {
                    //移除父级元素中第一个子级元素
                    my$("dv").removeChild(my$("dv").firstElementChild);
                };
    
                my$("btn3").onclick = function() {
                    //点击按钮删除div中所有的子级元素
                    //判断父级元素中有没有第一个子元素
                    while (my$("dv").firstElementChild) {
                        my$("dv").removeChild(my$("dv").firstElementChild);
                    }
    
                };
            </script>
    
        </body>
    </html>
    
    

    相关文章

      网友评论

        本文标题:JS基础学习:元素创建

        本文链接:https://www.haomeiwen.com/subject/yzeciqtx.html