`
shuai1234
  • 浏览: 971728 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

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

阅读更多

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>


详细出处参考:http://www.jb51.net/article/23560.htm

分享到:
评论

相关推荐

    源文件程序天下JAVASCRIPT实例自学手册

    源文件程序天下JAVASCRIPT实例自学手册 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 ...8.4 本章小结

    JavaScript基础和实例代码

    JavaScript电子书,包括了JavaScript的大部分知识,可以帮助读者快速入门。内容如下: 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 ...8.4 本章小结

    ckeditor与ckfinder小结

    4. 接下来,找到要替换为 CKEditor 的文本输入框,例如一个 ASP.NET 的 `TextBox` 控件,通过 JavaScript 的 `CKEDITOR.replace()` 方法将其替换。在这个例子中,ID 为 `TextBox1` 的文本框被替换。 5. 对 CKEditor ...

    使用jQuery操作DOM的方法小结

    切换样式可以通过toggleClass()方法实现,它会在元素上添加或移除样式类。 3. 内容操作:html([content])方法用于获取或设置元素的HTML内容,它允许传入HTML标签。text([content])方法则用于获取或设置元素的文本...

    Jqury基础教程

    1.5 小结 第2章 选择符 2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符 2.4 属性选择符 2.5 自定义选择符 2.5.1 每隔一行为表格添加样式 2.5.2 基于表单的选择符 2.6 DOM遍历方法 2.6.1 为特定单元格添加样式 ...

    Javascript+DOM+总结

    ### 小结 本文主要介绍了 DOM 操作中的几个关键方法:`createElement()`、`createTextNode()`、`cloneNode()` 和 `appendChild()`。这些方法是 DOM 操作的基础,熟练掌握它们对于前端开发者来说至关重要。此外,还...

    jQuery DOM操作小结与实例

    `append()`、`prepend()`、`before()`和`after()`方法用于在现有元素之间插入新元素。`remove()`用于删除元素,`detach()`则保留其事件绑定和数据。 - **元素的修饰**: 可以使用`addClass()`、`removeClass()`、...

    jquery基础教程高清版PDF.part5.rar

     1.4 小结  第2章 选择符——取得你想要的一切   2.1 DOM   2.2 工厂函数$()   2.3 CSS选择符   2.4 XPath选择符   2.5 自定义选择符   2.6 DOM遍历方法   2.7 访问DOM元素   2.8 小...

    php网络开发完全手册

    1.7 小结 23 第2章 PHP的基础语法 24 2.1 语言构成与工作原理 24 2.2 常量与变量 25 2.2.1 常量的定义 25 2.2.2 变量的定义 26 2.2.3 变量的作用域 27 2.2.4 动态变量 29 2.3 运算符和关键字 29 2.4 流程控制语法 30...

    写给大家看的面向对象编程书(第3版).[美]Matt Weisfeld(带详细书签).pdf

    5.6.3 提供一种复制和比较对象的方法 73 5.6.4 让作用域尽可能小 73 5.6.5 类应当对自己负责 74 5.7 设计时充分考虑可维护性 75 5.7.1 使用迭代 76 5.7.2 测试接口 76 5.8 使用对象持久性 78 5.9 小结 79 ...

    锋利的jQuery_高清_书签.part2

    1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些...

    jQuery权威指南-源代码

    1.3 本章小结/11 第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器...

    jQuery语法小结(超实用)

    本文将深入探讨jQuery的语法小结,重点在于理解和应用这些基本概念。 1. 页面元素引用: jQuery允许开发者通过多种方式选取DOM元素,包括ID、类名、元素标签以及层级关系。例如,`$("#msg")`选取ID为`msg`的元素,...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    东南大学、中国科学技术信息研究所、国家图书馆有权保留本人所送交学位论文的复印件和电子文档,可以采用影印、缩印或其他复制手段保存论文。本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文和在...

    dreamweaver的各种组件

    Externel Javascript file 插入外部的js文件 Video embed 插入activemovie windowsMaxmizer 最大化窗口  名称 简介 Reverse Timeline Reverse Timeline可以从TIMELINE的帧15倒放到帧1,但必须将其放到TIMELINE...

    jQuery入门2

    #### 三、小结 通过本课程的学习,学员不仅能够掌握jQuery的基础操作,还能深入了解如何利用jQuery进行文档操作、事件处理以及表单校验等高级功能。这些知识对于网页开发者来说是非常宝贵的资源,能够帮助他们在...

Global site tag (gtag.js) - Google Analytics