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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
js获取checkbox值的方法
Jan 28 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
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
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
js验证账户名是否重复
2020/05/26 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
函授自我鉴定范文
2014/02/06 职场文书
投标担保书范文
2014/04/02 职场文书
推广普通话标语
2014/06/27 职场文书
医学生求职信
2014/07/01 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
大学推普周活动总结
2015/05/07 职场文书
2019大学生实习报告
2019/06/21 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
详解SQL的窗口函数
2022/04/21 Oracle