通过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. MongoDB学习笔记(一)

    MongoDB的介绍我就不说了.直接开始环境的搭建和连接.在这个之前,向大家介绍几个关于MongoDB的网站. 1.  https://www.mongodb.com/ MongoDB的官网. 2. ...

  2. Linux 多线程串口通信

    大概流程就是打开一个串口.然后进行串口设置.开启二个线程,一个线程写数据,另一个线程读数据. 代码如下: #include <stdio.h> #include <stdlib.h& ...

  3. C#验证字符串是否是数字,是否包括中文，是否是邮箱格式，是否是电话格式

    using System;     using System.Web;     using System.Text;     using System.Web.UI.WebControls;     ...

  4. 百度地图之UI控制

    在本文中主要介绍百度地图UI控制功能,即控制地图是否有缩放.平移.双击放大.旋转.俯视的功能以及控制是否显示内置缩放组件.指南针位置等.在文中采用标签监听使每个控制功能的方法见名知义,代码原型来源百度 ...

  5. Linux编程return与exit区别

    Linux编程return与exit区别 exit  是用来结束一个程序的执行的,而return只是用来从一个函数中返回. return return 表示从被调函数返回到主调函数继续执行,返回时可附 ...

  6. 理解 Python 中的线程

    原地址:http://blog.jobbole.com/52060/ 本文由 伯乐在线 - acmerfight 翻译自 Akshar Raaj.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. 我 ...

  7. 15个nosql

    1.MongoDB 介绍 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.主要解决的是海量数据的访问效率问题,为WEB应用提供可扩展的高性能数据存 储解决方案.当数据量达到50GB以 ...

  8. H2O是开源基于大数据的机器学习库包

    H2O是开源基于大数据的机器学习库包 H2O能够让Hadoop做数学,H2O是基于大数据的 统计分析 机器学习和数学库包,让用户基于核心的数学积木搭建应用块代码,采取类似R语言 Excel或JSON等 ...

  9. cocos2d-x项目101次相遇: Scenes ， Director， Layers， Sprites

    cocos2d-x 101次相遇 / 文件夹  1   安装和环境搭建 -xcode  2   Scenes , Director, Layers, Sprites 3   建立图片菜单  4   在 ...

  10. WinCE隐藏显示任务栏，当任务栏隐藏时将其显示，当任务栏显示时将其隐藏（FindWindow，ShowWindow，IsWindowVisible），

    HANDLE hWndTaskBar = ::FindWindow(TEXT("HHTaskBar"), NULL);  if(::IsWindowVisible(hWndTask ...