PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    JavaScript动态改变HTML页面元素例如添加或删除

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:可以通过JavaScript动态的改变HTML中的元素向HTML中添加元素首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加...
    可以通过JavaScript动态的改变HTML中的元素

    向HTML中添加元素

    首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置。

     
    复制代码 代码如下:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试文档</title>
    <script type="text/javascript">
    function add(){
    var element = document.createElement("p");
    var node = document.createTextNode("添加新段落");
    element.appendChild(node);
    x = document.getElementById("demo");
    x.appendChild(element);
    }
    </script>
    </head>
    <body>
    <div id="demo">
    <p>这是第一段</p>
    </div>
    <input type="button" value="按钮" onclick="add()" />
    </body>
    </html>
    删除HTML中的某个元素
     
    复制代码 代码如下:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试文档</title>
    <script type="text/javascript">
    function deleteE(){
    var father = document.getElementById("demo");
    var child = document.getElementById("p1");
    father.removeChild(child);
    }
    </script>
    </head>
    <body>
    <div id="demo">
    <p id="p1">这是第一段</p>
    <p id="p2">这是第二段</p>
    </div>
    <input type="button" value="删除" onclick="deleteE()" />
    </body>
    </html>

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-1397-1.html
    相关热词搜索: