document对象相关的几个常用的方法
2016-02-17 10:51
477 查看
方法 | 描述 |
var newP=createElement("p"); | 创建了一个p标签,p也可替换为div,span等 |
var oldTxt=createTextNode("this is old text"); | 创建文本节点,创建了内容为“this is old text”的文本 |
newP.appendChild(newTxt); | 向p标签中插入定义好的newTxt变量 |
newP.removeChild(newTxt); | 删除刚刚插入的文本内容 |
var newTxt=createTextNode("this is new text"); newP.replaceChild(newTxt,oldTxt) | 替换节点,返回文本内容为”this is new text"的p元素 |
这里是修改之后页面:
分析一下:
1.删除了标题元素
2.将图片替换成了文本
3.添加一个内容为The End的新元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //删除标题,我们需要先找到标题元素 window.onload=function(){ var hdr1=document.getElementById("hdr1"); //通过它自身找到它的父元素,进而删除它自身 hdr1.parentNode.removeChild(hdr1); //下面我们需要把图片替换成文本 //找到图片元素 var img1=document.getElementById("img1"); //创建一个文本节点 var newTxt=document.createTextNode("new text node"); //进行替换 img1.parentNode.replaceChild(newTxt, img1); //添加新元素 //首先要创建一个新元素 var newDiv=document.createElement("div"); //为其添加内容 newDiv.innerHTML="<h1>The End</h1>"; //向页面中添加div元素 document.body.appendChild(newDiv); } </script> </head> <body> <div id="div1"> <h1 id="hdr1">Header</h1> <p id="p1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <p id="p2"> Second paragraph with image. <img id="img1" src="wp_b0.jpg" alt=""> </p> </body> </html>
相关文章推荐
- jmeter--csv data set config
- 深入分析JavaWeb 20 -- EL表达式和EL函数库
- 太平洋皇冠证券按照2015年第四季度的收入计算,列出了全球企业云服务收入最多的10家科技公司
- HDU 5366 The mook jong
- MVC view与control数据传递
- c#,for穷举,百鸡百钱
- pyextend库-unpack列表集合字符串解包函数
- dubbo第一次配置学习记载一
- 对于SQLyog的2006错误的解决方式
- AndroidManifest合并原理
- 项目开发之代码优化
- netstat获得TCP连接信息的分类统计
- JVM内存配置详解
- SQL Server查询重复数据
- Property 'sqlMapClient' is required
- DAS NAS SAN
- 页面进入,直接进入某个选项卡选项卡
- Firewall Rule Properties Page: Advanced Tab
- JQUERY方法给TABLE动态增加行
- 回调函数