用js(javascript)动态添加删除盒子中的文字

最新推荐文章于 2023-11-07 16:13:46 发布

qq_41485882

最新推荐文章于 2023-11-07 16:13:46 发布

阅读量2.2k

点赞数

用js(javascript)动态添加删除盒子中的文字

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>动态添加删除盒子中的文字</title>
    <style type="text/css">
        #con{width:300px;height:100px;background:#ccc; border:1px solid #000;}
    </style>
</head>
<body>
    <div id="con">
    </div>
    <button id="add">添加</button>
    <button id="del">删除</button>
</body>
</html>
<script type="text/javascript">
    var con = document.getElementById('con');
    var add = document.getElementById('add');
    add.onclick = function(){
        con.innerHTML = '我是js添加的代码';
    }

    var del = document.getElementById('del');
    del.onclick = function(){
        con.innerHTML ='';
    }
</script>