JS如何添加删除div

JS如何添加删除div,第1张

有好几种方式哈

html代码如下:

<div id="box">

    <div id="inbox">ddddddddddddddddd</div>

</div>

<input type="button" id="remove" value="删除DIV" />

第一种:直接jquery的remove:

  下载个jQuery的文件,然后引入jQuery文件:

    <script type="text/javascript" src="xxxx.jquery.js"></script>

    <script type="text/javascript">

        $("#remove").click(function(){

            $("#inbox").remove()

                        //或者

                        $("box").remove("#inbox")

        })

    </script>

第二种:用JS的innerHTML

    <script type="text/javascript">

        function g(id) {

            return document.getElementById(id)

        }

        g("remove").onclick = functioin(){

            g("box").innerHTML = ''

        }

    </script>

第三种:用JS的outerHTML

    <script type="text/javascript">

        function g(id) {

            return document.getElementById(id)

        }

        g("remove").onclick = functioin(){

            g("inbox").outerHTML = ''

        }

    </script>

第四种:用JS的removeChild

    <script type="text/javascript">

        function g(id) {

            return document.getElementById(id)

        }

        g("remove").onclick = functioin(){

            g("box").removeChild(g("inbox"))

        }

    </script>

其他还有,就不列举了

添加删除Div,有很多种方法。下面具一个简单的方法。

通过修改html内容来 *** 作

<body>

<input type="button" id="btn"/>

<a href="javascript:" id="div-box"></a>

</body>

<script>

    var oBtn = document.getElementById('btn')

    var oBox = document.getElementById('div-box')

    oBtn.onclick = function () {

        var html = '<div style="width:100px height:100px background: #ccc"></div>'

        if (oBox.innerHTML == '') {

            oBox.innerHTML = html

        } else {

            oBox.innerHTML = ''

        }

    }

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11482417.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存