Javascript中的innerText和InnerHTML

(1)几乎所有DOM元素都有innerText和innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码。

(2)在firefox下,不支持innerText,可以用textContent属性。也可以用innerHTML设置普通文本。

(3)用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建

(4)innerHTML所有浏览器都支持

示例一:使用innerText和innerHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        onload = function(){
            document.getElementById(‘btnTxt‘).disabled = false;
            document.getElementById(‘btnHTML‘).disabled = false;
            document.getElementById(‘btnTxt‘).onclick=function(){
                document.getElementById(‘dv‘).innerText="唉!我又变帅了";
            };
            document.getElementById(‘btnHTML‘).onclick=function(){
                document.getElementById(‘dv‘).innerHTML = ‘<a href="http://www.baidu.com">百度</a>‘;
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btnTxt" value="Txt"/>
    <input type="button" id="btnHTML" value="HTML"/>
    <div id="dv" style="width:300px;height:180px;border:solid 1px red;margin:5px;"></div>
</body>
</html>

效果图(我发现firefox也是支持innerText的)

示例代码二:使用textContent

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        onload = function(){
            document.getElementById(‘btnTxt‘).onclick=function(){
//                document.getElementById(‘dv‘).innerText="唉!我又变帅了";
                document.getElementById(‘dv‘).textContent="唉!我又变帅了";
            };
            document.getElementById(‘btnHTML‘).onclick=function(){
                document.getElementById(‘dv‘).innerHTML = ‘<a href="http://www.baidu.com">百度</a>‘;
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btnTxt" value="Txt"/>
    <input type="button" id="btnHTML" value="HTML"/>
    <div id="dv" style="width:300px;height:180px;border:solid 1px red;margin:5px;"></div>
</body>
</html>

效果图

时间: 2024-10-14 09:34:21

Javascript中的innerText和InnerHTML的相关文章

[ jquery 方法 text([val|fn]) ] 此方法操作匹配的元素或元素集中的内容,相当于javascript中的innerText属性

取得所有匹配元素的内容:结果是由所有匹配元素包含的文本内容组合起来的文本,这个方法对HTML和XML文档都有效,相当于javascript中的innerText属性,可读可写,但是无法解析HTML标签: 如果传入的是callback,此函数返回一个字符串并且参数解析如下: 1.index为元素在集合中的索引位置 2.text为原先的text值. 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Ins

jQuery中没有innerText、innerHtml [转]

本人刚接触jQuery. 发现如果我在div或者其他非表单的标签中赋值,原本用普通的 javascript 就直接 document.getElementById("id").innerHtml (或者其他几个)就可以了,但是在 jQuery 中不行! 例如: document.getElementById("t").innerHTML="ddddddddddd"; -----------改变id=“t”的元素为dddddddddd $(&quo

js中的innerText、innerHTML、属性值、value与jQuery中的text()、html()、属性值、val()总结

js与jQuery获取text.html.属性值.value的方法是不一样的. js与jQuery,text与innerText获取(<!---->中为结果) html: <p id="test">这是段落中的 <b>粗体</b> 文本.</p> <button id="btn10">jQuery显示text</button> <!--Text: 这是段落中的 粗体 文本.--

jQuery中没有innerText、innerHtml

发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在jQuery中不行 例如: document.getElementById("t").innerHTML="ddddddddddd";     -----------A$("#t").innerHTML="sdsds";     

javascript中的innerHTML,innerText,outerHTML的用法及其区别

示例html代码: <div id="test"> <span style="color:red">test1</span> test2 </div> 获得id为test的DOM对象,下面就不一一获取了. var test = document.getElementById('test'); test.innerHTML 描述:也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.inner

Javascript中innerHTML和innerText的区别

innerHTML:获取的是从对象的起始位置到终止位置的全部内容,包括HTML标签 innerText:获取的是起始位置到终止位置的内容,但是会将HTML标签去掉 下面写一段代码进行测试: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </

bobo JavaScript中innerHTML,innerText,value

一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a").innerHTML=""; getElementById("a").innerText="";  这两个的区别直接上图,不解释了. innerHTML,是在块中加html代码:innerText 在块中加文字. (注意大小写)!!!!!!  

javascript中innerText和textContent的兼容问题

IE支持innerHTML与innerText FireFox支持innerHTML与textContent 所以在IE与FireFox中使用显示内容时 必须得先判断浏览器 然后决定使用innerText还是textContent javascript中innerText和textContent的兼容问题

jQuery中的text()、html()和val()以及innerText、innerHTML和value

*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表单设置了value属性): (text()和html()的区别是:前者是处理的文本内容,只能写文本如果写了上面的标记则会以文本形式输出:后者可以解析文本中的html标记,就是你可以添加像<a></a>.<p></p>等标记,最后会解析为其效果.) *JavaSc