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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript继承方式实例
Oct 29 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
vue封装swiper代码实例解析
Oct 08 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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
php自动跳转中英文页面
2008/07/29 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
遍历js中对象的属性和值的实例
2016/11/21 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
使用python实现knn算法
2017/12/20 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python如何实现转换URL详解
2019/07/02 Python
python中append函数用法讲解
2020/12/11 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
区域销售经理职责
2013/12/22 职场文书
初级会计求职信范文
2014/02/15 职场文书
聘任书模板
2014/03/29 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
新法人代表任命书
2014/06/06 职场文书
关爱留守儿童标语
2014/06/18 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书