通过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. Core Data 和 sqlite3的性能对比【图】3gs,iPhone4,4s,5的性能测试。

    demo 和源码再此下载  :http://download.csdn.net/detail/hherima/5603797

  2. codeforces 598A Tricky Sum

    题目链接:http://codeforces.com/contest/598/problem/A 题目分类:大数 题意:1到n 如果是2的次方则减去这个数,否则就加上这个数,求最后的结果是多少 题目分 ...

  3. 基于Predictive Parsing的ABNF语法分析器(十三)——rulelist、rule、rulename、define-as和elements

    我们来看看rulelist,它是整个ABNF文法的入口,就是说一个ABNF文法就是一个规则列表rulelist.一个rulelist由若干个rule规则组成,每个rule由规则名rulename.定义 ...

  4. WinMM.dll 函数汇总

    #include "MMSystem.h" auxGetDevCaps                  查询指定的辅助输出设备以确定其性能 auxGetNumDevs       ...

  5. HDU 2112 HDU Today(Dijkstra)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2112 HDU Today Time Limit: 15000/5000 MS (Java/Others ...

  6. cocos2dx游戏开发学习笔记3-lua面向对象分析

    在lua中,能够通过元表来实现类.对象.继承等.与元表相关的方法有setmetatable().__index.getmetatable().__newindex. 详细什么是元表在这里就不细说了,网 ...

  7. 经常使用Firefox插件大全

    Web开发者经常使用的火狐插件 1)FireShot:是一个截图工具,来源于截图软件Screenshot Studio的开发商,是一个Firefox扩展或者说是Firefox版的Screenshot ...

  8. uva 1434 - YAPTCHA(数论)

    题目链接:uva 1434 - YAPTCHA 题目大意:给定n和k,求题目中给定的式子S(n). 解题思路:威尔逊定理,x为素数时有,((x−1)!+1)%x==0,所以对于本题.假设3*k+7为素 ...

  9. centos 6.3 vnc连接—— catalog is not properly configured, attempting to determine an appropriate font p

    摘要:linux环境下,利用VNC连接远程桌面是经常用到的.这里,我们介绍centos上,利用VNC连接远程桌面的方法和常见的两个问题的解决方法1)由于字体问题,导致VNCserver无法启动 2)由 ...

  10. hdu 5071 Chat(模拟)

    题目链接:hdu 5071 Chat 题目大意:模拟题. .. 注意最后说bye的时候仅仅要和讲过话的妹子说再见. 解题思路:用一个map记录每一个等级的妹子讲过多少话以及是否有这个等级的妹子.数组A ...