API之元素的创建-CSDN博客

<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>

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

口诀：有则删除，无则创建

<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>

转载于:https://www.cnblogs.com/1020-jj/p/10951881.html