innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

innerText 属性在 IE 浏览器中可以得到当前元素过滤掉 HTML Tags 之后的文本内容,在某些时候还是比较有用。但类似的非标准属性/方法在其他浏览器中并不一定都得到支持。

类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供对应的 prototype 定义。比如:

var isMinNS5 = (navigator.appName.indexOf("Netscape") >= 0 &&

parseFloat(navigator.appVersion) >= 5) ? 1 : 0;

if (isMinNS5){

HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){

switch (where){

case ’beforeBegin’:

this.parentNode.insertBefore(parsedNode,this)

break;

case ’afterBegin’:

this.insertBefore(parsedNode,this.firstChild);

break;

case ’beforeEnd’:

this.appendChild(parsedNode);

break;

case ’afterEnd’:

if(this.nextSibling){

this.parentNode.insertBefore(parsedNode,this.nextSibling);

}

else{

this.parentNode.appendChild(parsedNode)

}

break;

}

}

HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr){

var r = this.ownerDocument.createRange();

r.setStartBefore(this);

var parsedHTML = r.createContextualFragment(htmlStr);

this.appendChild(parsedHTML)

}

HTMLElement.prototype.insertAdjacentText = function(where,txtStr){

var parsedText = document.createTextNode(txtStr)

this.insertAdjacentElement(where,parsedText)

}

HTMLElement.prototype.__defineGetter__

(

"innerText",

function(){

var anyString = "";

var childS = this.childNodes;

for(var i=0; i<childS.length; i++){

if(childS[i].nodeType==1)

anyString += childS[i].tagName=="BR" ? ’\n’ : childS[i].innerText;

else if(childS[i].nodeType==3)

anyString += childS[i].nodeValue;

}

return anyString;

}

);

}

(0)

相关推荐

  • innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    innerText 属性在 IE 浏览器中可以得到当前元素过滤掉 HTML Tags 之后的文本内容,在某些时候还是比较有用.但类似的非标准属性/方法在其他浏览器中并不一定都得到支持. 类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等.如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供对应的 prototype 定义.

  • innerHTML,outerHTML,innerText,outerText的用法及区别解析

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div> <input name="innerHTML" value="innerHTML" type="button" OnClick="

  • 总结AJAX相关JS代码片段和浏览器模型

    在.net开发中,充分利用免费控件是好事情,但是如果不能修改控件达到自己的需求,就要动用JS大法了,前提是研究好浏览器模型 的各种对象的方法属性.尤其是熟悉CSS+HTML就会做的很酷.就JS语言本身来说要求不高. 1.动态删除Table 里面内容技巧,不需要写太多代码,一行: tb.removeNode(true) 2.动态增加行,除了CreateElement方法,还可以这样比较短小: <table id=tb1></table> <SCRIPT> function

  • 不会死机的js 格式代码

    JSer /* Global CSS */ * { padding:0px; margin:0px; font-size:13px; font-family: arial 宋体; } body { overflow:auto; border:0px none black; background-color:buttonface; } li { margin:0px 0px 0px 40px; padding:2px 4px; } /* Class CSS */ .quote { color:#9

  • JS代码格式化和语法着色V2

    升级到第二版,开一贴以示庆贺,哈哈哈 自 Ver1.1 升级内容 1. 增加函数列表 2. 增加函数 Export 功能 3. 增加函数依存关系分析 (这个功能个人未见其他软件实现过,自己创意,问题多多,目前分析能力还是比较有限的,只能分析全局函数依存关系,可能在复杂代码的情况下出现 bug) 4. 修正 for 语句分析 bug 5. 修正 语法折叠的 bug 6. 改进 Collapse All ※ Expand All 函数工作方式,避免行数太大时的死机 7. 改进行号分析机制,避免行数太

  • javascript网页随机点名实现过程解析

    主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机点名</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1

  • 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">

  • innerHTML,outerHTML,innerTEXT三者之间的区别

    与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:

  • 详谈innerHTML innerText的使用和区别

    document对象中有innerHTML.innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的: 1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身) 2) outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身) 3) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身) 4) outerTe

  • js中innerText/textContent和innerHTML与target和currentTarget的区别

    一.获取/赋值文本值innerText/textContent.innerHTML <body> <div id="box_text"> <p style="color:hotpink;">muzidigbig</p> <p style="color:pink">lovely</p> </div> <input type="text" i

随机推荐