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

JavaScript动态更改页面元素的更多相关文章

  1. [html][javascript]动态增删页面元素

    <script type="text/javascript"> function append(event){ var myhref = document.create ...

  2. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  3. 爬虫 selenium+Xpath 爬取动态js页面元素内容

    介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如 ...

  4. 使用JavaScript动态更改CSS样式

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  5. JS 判断图片尺寸大小，以便页面resize时，动态调整页面元素位置

    ){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4 ...

  6. Scrapy爬虫框架（实战篇）【Scrapy框架对接Splash抓取javaScript动态渲染页面】

    (1).前言 动态页面:HTML文档中的部分是由客户端运行JS脚本生成的,即服务器生成部分HTML文档内容,其余的再由客户端生成 静态页面:整个HTML文档是在服务器端生成的,即服务器生成好了,再发送 ...

  7. javascript 动态推断html元素

    在javascript中为了针对不同的元素运行不同的操作,须要在javascript中对触发事件的元素进行推断,然后运行不同的操作. 样例: html <input type='button' ...

  8. php使用QueryList轻松采集JavaScript动态渲染页面

    QueryList使用jQuery的方式来做采集,拥有丰富的插件. 下面来演示QueryList使用PhantomJS插件抓取JS动态创建的页面内容. 安装 使用Composer安装: 安装Query ...

  9. 微信小程序 —— 动态决定页面元素显示或隐藏的技巧

    在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’ ...

随机推荐

  1. go语言初体验

    go下载地址: http://code.google.com/p/go/downloads/list go官方安装地址: http://golang.org/doc/install 另外收集一些关于g ...

  2. Indy的TCPServer到底能支持多少个连接

    最近一个项目,最开始使用IdTcpServer,在大压力测试的时候,只连接了800个多一点的客户端(每个客户端连接上之后每秒钟发送一个几十字节的报文,服务器应答).但是持续的时间不会超过10分钟,服务 ...

  3. navicat for mysql 显示中文乱码解决办法

      最近遇到一个问题,用navicat for mysql 打开数据库时全都显示的是乱码(在用程序代码插入数据之前确保字符不是乱码),遇到问题就的寻求解决之道,百度了好长时间也没解决,网上那些解决办法 ...

  4. Opencv各个版本的万能头文件

    每次下载opencv的新版本时,都需要重新写头文件,更改链接库配置,很麻烦有木有?下面这个头文件是我在别人的代码中淘出来的,很不错,与大家分享~(具体作者忘记了,不好意思啊) 作者很巧妙地利用Open ...

  5. VCL改变主窗体的方法

    使用如下语句即可Pointer((@Application.MainForm)^) := Form1; 仔细想想和Pointer((Application.MainForm)) := Form1;有什 ...

  6. osc搜索引擎框架search-framework,TngouDB,gso,

    项目目的:OSChina 实现全文搜索的简单封装框架 License: Public Domain 包含内容: 重建索引工具 -> IndexRebuilder.java 增量构建索引工具 -& ...

  7. SICP 习题 （2.6） 解题总结:丘奇计数

    SICP 习题 2.6 讲的是丘奇计数,是习题2.4 和 2.5的延续. 这里大师们想提醒我们思考的是"数"究竟是什么,在计算机系统里能够怎样实现"数".准备好 ...

  8. poj 动态规划的主题列表和总结

    此文转载别人,希望自己可以做完这些题目. 1.POJ动态规划题目列表 easy:1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, ...

  9. File already exists: filesystem '/path/file', transaction svn常见错误解决方法

    前言 多人任务基本都会用到SVN,于是提交的时候如果不先更新在提交或者操作顺序不对,会经常出现错误,其中File already exists: filesystem这个就是个常见问题,上网找了半天没 ...

  10. html5css3杂记

    最新版本号的safari.chrome.firefox以及opera支持某些html5特性.ie9将支持某些html5特性. html5提供了展现视频的标准<video>支持ogg及mpe ...