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 相关文章推荐
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
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
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
英文自荐信格式
2013/11/28 职场文书
优秀广告词大全
2014/03/19 职场文书
难忘的一课教学反思
2014/04/30 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
退货证明模板
2015/06/23 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
MySQL注入基础练习
2021/05/30 MySQL