JS中innerHTML和pasteHTML的区别实例分析

本文实例讲述了JS中innerHTML和pasteHTML的区别。分享给大家供大家参考，具体如下：

innerHTML 是一个属性，可以取得或者设定该元素内的 HTML 内容，可以是任意能包含 HTML 子节点的元素都使用它

pasteHTML()是一个方法，在指定的文字区域内替换该区域内的文本或者HTML，该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上

例：

<Script Language="JavaScript">
function addLink(){
 var oRange = document.selection.createRange();
 if(oRange.text!=''){
   var oUrl = window.prompt('链接网址...','http://www.163.com/');
   var oHtml = '<a href='+oUrl+' target=_blank>'+oRange.text+'</a>';
   oRange.pasteHTML(oHtml);
 }else{
   window.alert('您没有选择加链接的文字！');
 }
}
</Script>
网易  新浪  搜狐<br><br>
<input type="button" value="添加链接" onclick="addLink();">

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • JS实现pasteHTML兼容ie,firefox,chrome的方法

    本文实例讲述了JS实现pasteHTML兼容ie,firefox,chrome的方法.分享给大家供大家参考,具体如下: <html> <body> <script language="JavaScript"> function test() { if (document.selection && document.selection.createRange) { var myRange = document.selection.cre

  • javascript 异步的innerHTML使用分析

    javascript 异步的innerHTML使用分析

    当然,这个分时加载技术只是一个辅助技术,本身没有添加节点的能力.如今,另一种更奇特的技术Asynchronous innerHTML又被开发出来了,不能不赞一下外国人在这方面研究是非常超前的. 复制代码 代码如下: function asyncInnerHTML(HTML, callback) { var temp = document.createElement('div'), frag = document.createDocumentFragment(); temp.innerHTML =

  • javascript innerHTML使用分析

    空格处理 当在DIV中输入"a[任意个空格]a" HTML呈现在Chrome和IE下是一样的:只显示一个空格. innerHTML属性 IE还是两个a加一个空格, Chrome则是原始输入的样子. 回车 当在DIV中输入"a[回车][任意个空格]a"时,HTML呈现Chrome和IE是一样的. innerHTML属性 IE是3个字符,在两个a中间加了个空格. Chrome则是原始输入的样子,将回车解析为\n. HTML标记 当在DIV中输入"a<Br

  • js innerHTML 的一些问题的解决方法

    然而,你需要知道 innerHTML 有一些自身的问题: 1.当 HTML 字符串包含一个标记为 defer 的 script 标签(<script defer>-</script>)时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击.  2.设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险. 还有几个其他次要的缺点,也值得一提的: 1.你不能得到刚刚创建的元素

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

  • JavaScript中innerHTML，innerText，outerHTML的用法及区别

    不废话了,请看下文示例介绍. 用法: <div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中可以使用: test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">

  • JS中innerHTML和pasteHTML的区别实例分析

    本文实例讲述了JS中innerHTML和pasteHTML的区别.分享给大家供大家参考,具体如下: innerHTML 是一个属性,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它 pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上 例: <Script Language="

  • jQuery中serializeArray()与serialize()的区别实例分析

    jQuery中serializeArray()与serialize()的区别实例分析

    本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

  • JS中call和apply函数用法实例分析

    本文实例讲述了JS中call和apply函数用法.分享给大家供大家参考,具体如下: call 函数 语法 obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]); 简介 thisObj继承obj的属性和方法(obj原型链上的属性和方法不能被继承),后面的参数会当成obj的参数安装顺序传递进去. 示例 function animal(type,nickname){ this.type = type; this.nickname = nickname; this.s

  • PHP中isset与array_key_exists的区别实例分析

    本文实例讲述了PHP中isset与array_key_exists的区别.分享给大家供大家参考.具体分析如下: 1.对于数组值的判断不同,对于值为null或''或false,isset返回false,array_key_exists返回true: 2. 执行效率不同,isset是内建运算符,array_key_exists是php内置函数,isset要快一些.请参考:PHP 函数实现原理及性能分析 3.当用isset访问一个不存在索引数组值时,不会引起一个E_NOTICE的php错误消息: 4.

  • js中值引用和地址引用实例分析

    本文实例讲述了js中值引用和地址引用.分享给大家供大家参考,具体如下: js中任何事务都是对象.包括基本数据类型(undefined,boolean,number,string,null). 对象只是拥有属性和方法的特殊数据类型. 基本数据类型也是对象 var a = "hello"; var b = "hello"; 既然是对象,那么它默认拥有属性和方法 a.length 长度属性 a.toUpperCase() 把字符串a编程大写的方法 a==b,因为是按照 值

  • JavaScript中toLocaleString()和toString()的区别实例分析

    本文实例讲述了JavaScript中toLocaleString()和toString()的区别.分享给大家供大家参考,具体如下: <javascript高级程序设计>解释: "toLocaleString()返回对象的字符串表示,该字符串与执行环境的地区对应:toString()返回对象的字符串表示:" 感觉还是不太好理解......来看几个实例: 字符串: var a = 6666; a.toLocaleString(); //"6,666" a.t

  • PHP中cookie和session的区别实例分析

    cookie和session是PHP程序设计中非常重要的技巧.深入理解并掌握cookie和session的应用是进行PHP程序设计的基础.本文就以实例形式来分析一下二者之间的区别.具体分析如下: 1.Cookie cookie 是一种在远程浏览器端储存数据并以此来跟踪和识别用户的机制. PHP在http协议的头信息里发送cookie, 因此 setcookie() 函数必须在其它信息被输出到浏览器前调用,这和对 header() 函数的限制类似.   1.1 设置cookie:     可以用

  • PHP中include和require的区别实例分析

    先编辑command.php文件 echo 'hello'.PHP_EOL; 然后编辑console.php文件 for($i=1;$i<=3;++$i){ require 'command1.php'; } 原本想要包含并执行这个echo,没想到写错了文件名,如果是require,会报出这样的错误: Warning: require(command1.php): failed to open stream: No such file or directory in console.php on

  • js中script的上下放置区别，Dom的增删改创建操作实例分析

    本文实例讲述了js中script的上下放置区别,Dom的增删改创建操作.分享给大家供大家参考,具体如下: 回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8    es6中有类的概念 声明变量 var  let(es6中语法) 内置函数 Date Math.random if else  switch while do-while  for 2.DOM  Document Object Model 获取DOM事件的三种方式 getElemen

  • js中apply()和call()的区别与用法实例分析

    js中apply()和call()的区别与用法实例分析

    本文实例讲述了js中apply()和call()的区别与用法.分享给大家供大家参考,具体如下: 每个函数都包括两个非继承而来的方法:apply()和call().两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值. 两者区别仅在于接收参数方式不同,apply()第一个参数是调用apply的函数运行的作用域,的第二个参数可以是Array的实例(数组),也可以是arguments对象,call()第一个参数是this的值没有变化,而其余参数都直接传递给函数(也就是逐个列举出

随机推荐