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>