zoukankan      html  css  js  c++  java
  • JavaScript动态更改页面元素

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



  • 相关阅读:
    ASP.NET Core学习——7
    ASP.NET Core学习——6
    ASP.NET Core学习——6
    ASP.NET Core学习——5
    ASP.NET Core学习——4
    平衡的括号(名字怪怪的~)
    找复合单词
    卡片游戏
    Ducci 序列
    卡片游戏O(∩_∩)O
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5035114.html
Copyright © 2011-2022 走看看