使用原生JS来改变HTML文档的几种方法
来源:互联网 发布:淘宝上钱包店铺哪家好 编辑:程序博客网 时间:2024/06/06 03:38
有如下html页面:
现在需要使用原生的JS来对这个页面进行增添修改。
<div id="test"> <h2>hello</h2</div>
方法1-使用 innerHTML:
function changeCode() { var a=document.getElementById("test"); a.innerHTML="<h1>HI HOW A U?</h1>";}window.onload=function(){ changeCode();};
这种方法最为简单粗暴,直接引入一段Html片段,但是会讲之前存在的片段覆盖掉,比如原本存在的Hello就被覆盖掉了。
方法2-三板斧:createElement() (创建节点); createTextNode()(创建文本节点) ; appendChild()(插入节点) ;
逐一介绍:
首先先直接贴出完成代码:
function changeCode() { var a=document.getElementById("test"); var h1 = document.createElement("h1"); var content = document.createTextNode("HI HAO R U?") h1.appendChild(content); a.appendChild(h1);}window.onload=function(){ changeCode();};
(1)createElement():所谓创建节点,通俗点讲就是创建一个标签。比如我想要创建一个标签<h1>
,则如下:
var h1 = document.createElement("h1");
但这仅仅只是一个标签而已,里面没有任何内容:<h1></h1>
如果要往h1里面增添内容,我们首先得要创建内容,于是用到了createTextNode()。
(2)createTextNode():创建文本节点。比如我想创建一段文本节点如下:
var content = document.createTextNode("HI HOW R U?");
但是这只是一段文本片段,如果要让这段文本片段和上面创建的<h1></h1>
联系起来,就需要用到appendChild()了。
(3)appendChild():插入节点。我想把content里的内容插入到h1里面:
h1.appendChild(content);
于是现在就变成了<h1>HI HOW A U?</h1>
。但是如果要把这段代码放到html页面上,我们还要再用一次这个方法:
var a=document.getElementById("test");a.appendChild(h1);
大功告成,刷新你的页面看看效果吧。
下面是我觉得需要注意的地方:
前两板斧方法的前缀是document,因为他们是由“文档”创建出来的,有一种说法很有意思,这些节点一开始被创建出来时就相当于JS代码世界中的孤儿,居无定所,我们需要用appendChild()帮他们找到适合自己的家。
- 使用原生JS来改变HTML文档的几种方法
- 使用JQ来改变HTML文档的几种方法
- HTML文档插入JS代码的几种方法
- 原生JS改变HTML内容
- 原生JS数组去重的几种方法
- 原生Js对html文档的属性操作
- jQuery加载html文档的几种方法
- jQuery加载html文档的几种方法
- 原生Js的几种时间效果
- 原生 js 操作dom的方法(创建节点和操作节点的几种方法)
- 页面自动执行的几种方法 (加载)js的几种方法 原生和jquery
- 原生JS绑定事件的兼容性写法与绑定事件的几种方法
- 原生js判断某个元素是否有指定的class名的几种方法
- JS获取网页中HTML元素的几种方法
- JS获取网页中HTML元素的几种方法
- JS获取网页中HTML元素的几种方法
- JS获取网页中HTML元素的几种方法
- Js 获取HTML DOM节点元素的几种方法
- h264 NAL头解析
- 数据库建模三步骤:概念模型->逻辑模型->物理模型
- Oracle PLSQL 学习笔记三
- 10.22培训
- 博通“toolschain”搭建--安装篇!
- 使用原生JS来改变HTML文档的几种方法
- FireTweet官方下载
- Android Network --判断网络状态(网络的连接,改变,和判断2G/3G/4G)
- CSDN博客排名第一名2016.10
- 如何合并两个已排序的表?
- 搭建web服务器
- mybatis 自动增长id保存后得到id
- Entity Framework自定义迁移历史表(EF6以上)
- linux密码安全加固技术-CKEY动态密码技术【顶】