js---html元素操作
思路：创给节点添加一个元素：步骤：
1：创建元素节点
2：创建文本节点
3：将该文本添加到元素上
4：将该元素追加到其他元素上
appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加，如需不想作为最后一个添加，则可使用 insertBefore() 方法。如下代码：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
修改 HTML = 改变元素、属性、样式和事件。
修改 HTML 元素
修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。
创建 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML 属性。
下面的例子改变一个 <p> 元素的 HTML 内容：
实例
<html>
<body> <p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML="New text!";
</script> </body>
</html>
提示：我们将在下面的章节为您解释例子中的细节。
改变 HTML 样式
通过 HTML DOM，您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式：
实例
<html> <body>
<p id="p2">Hello world!</p> <script>
document.getElementById("p2").style.color="blue";
</script> </body>
</html>
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
实例
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var element=document.getElementById("d1");
element.appendChild(para);
</script>
js---html元素操作的更多相关文章
- D3.js系列——元素操作和简单画布操作
一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...
- jquery/js iframe 元素操作
1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...
- js中元素操作的有关内容与对比
以下 A:代表原生js B:代表jQuery 1 创建元素/节点 A: 元素节点- createElement( ) 文本节点 - createTextNode() 例如: var a = docum ...
- js基础---元素操作时字符串拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- SVG.js 元素操作整理（二）-Transform
一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...
- selenium中元素操作之浏览器窗口滚动&网页日期控件操作（js操作）（五）
js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...
- 使用 Jquery-UI 实现一次拖拽多个选中的元素操作
项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在 ...
- selenium元素操作
1.文本框(text field or textarea) element.sendKeys("test");//在输入框中输入内容: element.clear(); //将输入 ...
- nw.js如何处理拖放操作
nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了. 首先我们看一下一个正常的页面,直接拖放 ...
- JS-006-表格元素操作
直接上菜咯... 以下为 HTML 表格源码: <html> <head> <meta http-equiv="Content-Type" conte ...
随机推荐
- centOS防火墙
默认防火墙firewall #停止firewall systemcl stop firewall.service #禁止firewall开机启动 systemctl disable firewall. ...
- C#学习笔记_09_构造方法/函数
09_构造方法/函数 代码案例 作用:构造函数主要是用来创建对象时为对象赋初值来初始化对象:总与new运算符一起使用在创建对象的语句中,例如A a=new A(); 特点: 构造函数具有和类一样的名称 ...
- java常见知识
在JSP页面获取当前项目名称的方法: 方法1: <%= this.getServletContext().getContextPath() %> 方法2: 使用EL表达式 ${pageCo ...
- 【codeforces 797E】Array Queries
[题目链接]:http://codeforces.com/problemset/problem/797/E [题意] 给你一个n个元素的数组; 每个元素都在1..n之间; 然后给你q个询问; 每个询问 ...
- 敏捷开发系列学习总结（4）—Git管理工具sourcetree的安装
现在代码管理都流行用git了,小编以前用过clearcase, svn,vss等.现在用了git后,发现git才是最好的,我觉得它最吸引人的地方应该是它的分布式管理吧.git的具体学习,读者可自己去网 ...
- c++ primer 第三章 标准库类型
1. string 标准库 1.1初始化 string s1; 默认构造函数s1为空 string s2(s1); 将s2初始化为s1的一个副本 string s3("value" ...
- 洛谷——P1034 矩形覆盖
https://www.luogu.org/problem/show?pid=1034 题目描述 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n＝4 时,4个点的 ...
- Navicat 提示Cannot create oci environment 解决方式
一直在使用Navicat,这是一个数据库client软件.能连接多种不同类型的数据库,给我们的日常的工作带来了不少的便捷.近期.我在电脑上安装了orcale,然后,Navicat就莫名其妙的不能连接o ...
- OllyDbg 使用笔记 （七）
OllyDbg 使用笔记 (七) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 演示样例程序下载:http://pan.baidu.com/s/1gvwlS 暴力破解 观察这个程 ...
- 【独立开发人员er Cocos2d-x实战 011】Cocos2dx 3.x命令行生成APK具体解释
Cocos2d-x 3.6项目打包生成apk安卓应用文件,搭建安卓环境的步骤有点繁琐.但搭建一次之后,以后就会很快捷! 过程例如以下: 一.下载安卓环境:搭建Android环境须要用到Android ...