js 复制或插入Html的实现方法小结


Posted in Javascript onMay 19, 2010

var bq=document.getElementsByTagName("标签或ID名")//ID是唯一无许分组,标签非唯一,有可能返回一个数组.
div=document.createElement("div");
...设置CSS风格
bq.appendChild(div);//ID唯一性的话只需要这样!在bq之后插入div层
bq[0].appendChild(div);//如果前面用的是标签!数组跟下标!在bq之后插入div层
bq.insertBefore(div);//ID唯一性的话只需要这样!在bq之前插入div层
bq[0].insertBefore(div);//如果前面用的是标签!数组跟下标!在bq之前插入div层

document.getElementById('navition').style.cssText = '您的CSS代码';
//复制一个div
var bq=document.getElementById("Copy")//ID是唯一无许分组,标签非唯一,有可能返回一个数组.
objDiv=document.createElement("div");
objDiv.id=bq.id + Copy;
objDiv.style.position="absolute"
objDiv.style.left="200px"
objDiv.style.top="200px"
objDiv.innerHTML=bq.innerHTML;
bq.appendChild(objDiv);

<div id="test">
<span style="color:red">test1</span> test2
</div>
<div id="test">
<span style="color:red">test1</span> test2
</div>

在JS中可以使用:

test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是

<span style="color:red">test1</span> test2
<span style="color:red">test1</span> test2

test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是

<div id="test"><span style="color:red">test1</span> test2</div>
<div id="test"><span style="color:red">test1</span> test2</div>

完整示例:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> <a href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a href="javascript:alert(test.innerText)">inerHTML内容</a> 
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a> 
<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a href="javascript:alert(test.innerText)">inerHTML内容</a> 
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用
innerHTML,而少用 innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含
HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a> 
<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

一些相关的文章
javascript dom 操作详解 js加强
Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
15 个 JavaScript Web UI 库
May 19 #Javascript
JavaScript 以对象为索引的关联数组
May 19 #Javascript
JavaScript 语言的递归编程
May 18 #Javascript
JS 树形递归实例代码
May 18 #Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 #Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 #Javascript
Javascript中的变量使用说明
May 18 #Javascript
You might like
Oracle 常见问题解答
2006/10/09 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php中的比较运算符详解
2013/10/28 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php中curl使用指南
2015/02/05 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python 连连看连接算法
2008/11/22 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python读取mysql数据绘制条形图
2020/03/25 Python
python实现学生成绩测评系统
2020/06/22 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
几个判断型的面试题
2012/07/03 面试题
小学亲子活动总结
2014/07/01 职场文书
代领毕业证委托书
2014/08/02 职场文书
办公室主任岗位职责
2015/01/31 职场文书
祝酒词范文
2015/08/12 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS