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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 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+mysql保存和输出文件
2006/10/09 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python切换pip安装源的方法详解
2016/11/18 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python实现动态数组的示例代码
2019/07/15 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
火车来了教学反思
2014/02/11 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
探亲假请假条
2014/04/11 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB