API之元素的建立

时间 2019-11-18

标签 api 元素建立繁體版

原文原文链接

<body>
    <input type="button" value="建立一个文本" id='btn'>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
                document.write('<p> 这是一个p标签</p>');
            }
            //使用document.write('标签代码和内容')有缺陷：若是在页面加载完毕后，此时经过这种方式建立元素，那么页面上存在的全部内容会所有被干掉
    </script>
</body>

对象.innerHTML = '标签及代码'

<body>
    <input type="button" value='给div添一个标签' id='btn'>
    <div id='dv'></div>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            document.getElementById('dv').innerHTML = '<p>晚安</p>'
        }
    </script>
</body>

documen.createElement（'标签的名字'）

<body>
    <input type="button" value="点击建立一个p标签" id="btn">
    <div id="dv"></div>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            //建立元素
            var pObj = document.createElement('p');
            pObj.innerHTML = '<p>这是一个p标签</p>';
            //把建立好的元素追加到父级元素中
            document.getElementById('dv').appendChild(pObj);
        }
    </script>
</body>

元素的相关方法

被追加的父级元素.appendChild(要追加的子元素);//追加子元素
被追加的父级元素.insertBefore(追加的子元素, dv.firstElementChild); 用追加的子元素替换被追加的父级元素的第一个子级元素
被追加的父级元素.replaceChild(追加的子元素, dv.firstElementChild); 用追加的子级元素替换被追加的父级元素的第一个子级元素
父级元素.removeChild(dv.firstElementChild); 删除父级元素的第一个子级元素

<style>
    .dv {
        width: 150px;
        height: 300px;
        border: 2px solid #def;
    }
</style>

<body>
    <input type="button" value='显示效果' id="btn">
    <input type="button" value='删除第一个子元素' id="btn1">
    <input type="button" value='删除全部子元素' id="btn2">
    <div id="dv">
        <!-- <p>这是一个p标签</p> -->
    </div>

    <script>
        var btn = document.getElementById('btn');
        var dv = document.getElementById('dv');
        dv.className = 'dv';
        var i = 0;
        btn.onclick = function() {
            i++;
            var inputObj = document.createElement('input');
            inputObj.type = 'button';
            inputObj.value = '按钮' + i;
            //dv.appendChild(inputObj);//追加子元素
            //把新的子元素插入到第一个子元素的前面
            dv.insertBefore(inputObj, dv.firstElementChild);
            //用新的子元素替换原来的元素
            //dv.replaceChild(inputObj, dv.firstElementChild);
        }
        var btn1 = document.getElementById('btn1');
        btn1.onclick = function() {
            //删除第一个子元素
            dv.removeChild(dv.firstElementChild);
        }
        document.getElementById('btn2').onclick = function() {
            //删除全部的子元素
            //判断父级元素中有没有第一个子元素
            while (dv.firstElementChild) {
                dv.removeChild(dv.firstElementChild);
            }
        }
    </script>

只建立一个元素的两种解决方法

口诀：有则删除，无则建立code

<style>
    div {
        width: 150px;
        height: 300px;
        border: 2px solid #abc;
    }
</style>

<body>
    <input type="button" value="在div中建立一个按钮" id="btn">
    <div id='dv'></div>

    <script>
        //有则删除-----删除后再建立
        // var btn = document.getElementById('btn');
        // btn.onclick = function() {

        //         if (document.getElementById('btn2')) {//若是为true就有，那么就删除以后再建立
        //             dv.removeChild(document.getElementById('btn2'));
        //         }
        //         var inObj = document.createElement('input');
        //         inObj.type = 'button';
        //         inObj.id = 'btn2';
        //         inObj.value = '我是被建立的button';
        //         var dv = document.getElementById('dv');
        //         dv.appendChild(inObj);
        //     }
        //无则建立
        var btn = document.getElementById('btn');
        btn.onclick = function() {

            if (!document.getElementById('btn2')) { // 若是document.getElementById('btn2')为true，证实名为btn2的按钮已经存在，再也不建立；若为false，证实没有则建立
                var inObj = document.createElement('input');
                inObj.type = 'button';
                inObj.id = 'btn2';
                inObj.value = '我是被建立的button';
                var dv = document.getElementById('dv');
                dv.appendChild(inObj);
            }

        }
    </script>

API之元素的建立

目录

元素建立的三种方式

元素的相关方法

只建立一个元素的两种解决方法