通过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. ThinkPhp学习13

    原文:ThinkPhp学习13 简单登录验证 创建Login类 <?php class LoginAction extends Action { function index(){ $this- ...

  2. [IDEs]Eclipse For Mac , 常用快捷键

    Cmd + O:  查看.java中得方法,变量,等结构 Cmd + T:     查看继承关系 Cmd + K:          查找下一个选中的成员 Cmd + E:  查看已经打开的文件 Cm ...

  3. UNIX下改动时间简单一例

    UNIX下改动时间简单一例 仅仅输入date就显示当前的工作站时间,假设有root超级用户权限,加上參数能够改动 工作站的时间. 格式:date mmddHHMM[cc]yy mm--月份,dd--日 ...

  4. hdu 4963(中途相遇法)

    题目链接:Dividing a String 题意:给定一个2*n(n<=20)的字符串及每个位置的字符包含的权重,求将该字符串分成两个子序列S1.T1,要求S1=T1且abs(weight1- ...

  5. 冒泡排序 JAVA版

    冒泡排序 算法思想是每次从数组末端开始比较相邻俩元素,把第i小的冒泡到数组的第i个位置.i从0一直到N-1从而完成排序.当然也可以从数组开始端开始比较相邻两元素,把第i大的冒泡到第N-i个位置.I从0 ...

  6. js编码、解码

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  7. hdu 1536(博弈)

    传送门:S-Nim 题意:给n个数的集合s, 再给m 组数据,每组表示 k 堆石子,每次可以取的个数只能是集合s中的数量.问先手胜还是输? 分析:sg函数的经典运用,先预处理出所有数量为0~10000 ...

  8. INSTALL_FAILED_MEDIA_UNAVAILABLE错误处理

    问题描写叙述: 在android手机上安装apk的时候,报错例如以下: Installation error: INSTALL_FAILED_MEDIA_UNAVAILABLE Please chec ...

  9. CSDN博客的一些问题(友好的吐槽)--后记,有一点点改进

    近期,CSDN博客真的非常不稳定,时常会出现503错误. 昨天.我发现自己的博客的訪问量仅仅有4万多,今天最终发现它变回原来的6万多了. 我写博客不是为了这个訪问量,可是,CSDN这点使用问题啦. 或 ...

  10. bzoj 3519: [Zjoi2014] 消棋子 题解

    [序言]在大家怀疑的眼光下,我做了一个中午和半个下午.调了一个晚上的题目总算A了! [原题] 消棋子是一个有趣的游戏.游戏在一个r * c的棋盘上进行.棋盘的每一个格 子.要么是空,要么是一种颜色的棋 ...