JQuery empty方法和remove方法的区别

时间:2021-01-06 14:26:25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>empty方法</title>
    <style type="text/css">
        #main{width:200px;margin:auto;border:1px solid red;}            
    </style>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //清空div中的innerHTML,注意此时div还是存在的
            $("#btnClearInnerHTML").click(function () {
                $("#main").empty();
            });
            //删除整个div节,div已经不存在了
            $("#btnClearDivNode").click(function () {
                $("#main").remove();
            });
        });
    </script>
</head>
<body>
    <div id="main">
        我是div中的内容
        <input id="btnClearInnerHTML" type="button" value="单击我清空div中的innerHTML" />
        <input id="btnClearDivNode" type="button" value="单击我删除整个div节点" />
    </div>
</body>
</html>