`
shuai1234
  • 浏览: 985230 次
  • 性别: 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学习总结

    - **对象冒充**:通过`call()`或`apply()`方法实现继承。 - **使用对象冒充实现继承**:通过构造函数调用基类的构造函数。 - **继承原型对象中的属性和方法**:通过`__proto__`属性或`Object.setPrototypeOf()`方法...

    源文件程序天下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 小...

    写给大家看的面向对象编程书(第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进行文档操作、事件处理以及表单校验等高级功能。这些知识对于网页开发者来说是非常宝贵的资源,能够帮助他们在...

    jQuery中Dom的基本操作小结

    创建新元素和添加到DOM中是两个不同的操作,创建元素是通过构造函数如$('&lt;li&gt;&lt;/li&gt;')进行的,而插入则是通过.append()、prepend()、after()、before()等方法实现的。 对于删除DOM节点,示例中展示了如何通过.remove...

Global site tag (gtag.js) - Google Analytics