JavaScript中innerHTML, innerText和value的区别是什么?
当前回答
innerText和innerHTML都返回HTML元素的内部部分。
innerText和innerHTML之间唯一的区别是:innerText返回HTML元素(整个代码)作为字符串并在屏幕上显示HTML元素(作为HTML代码),而innerHTML只返回HTML元素的文本内容。
请看下面的例子以更好地理解。运行下面的代码。
const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.'; . getelementbyid(“innertext的实现)。innerText = ourstring; . getelementbyid(“innerhtml”)。innerHTML = ourstring; . name { 颜色:红色; } <p><b>下面的内部文本。</b></p> < p id = " innertext”实现> < / p > < br > <p><b>下面的内部html。它将字符串呈现到元素中,并将其视为html文档的一部分 < p id = " innerhtml " > < / p >
其他回答
不过,与innerText不同的是,innerHTML允许您使用HTML富文本,并且不会自动对文本进行编码和解码。换句话说,innerText检索并将标记的内容设置为纯文本,而innerHTML检索并设置为HTML格式的内容。
var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);
要进一步细化它并检索值Alec(例如,使用另一个.childNodes[1])
var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);
1)内部网页
设置标记内的所有HTML内容 返回标记内的所有HTML内容 包括样式+空白
2) innerText
设置标记内的所有内容(使用标记对应的换行符) 返回标签内的所有HTML内容(带有标签对应的换行符) 忽略标签(只显示文本) 忽略样式+空白 如果我们有style:"visibility:hidden;"内标签 |_ innerText包含样式->隐藏内容
(3) textContent
设置标签内的所有内容(没有标签对应的换行符) 返回标签内的所有内容(没有标签对应的换行符) 包括空格 如果我们有style:"visibility:hidden;"内标签 |_ textContent忽略样式->显示内容 textContent具有更好的性能,因为它的值不会解析为HTML。
Innerhtml将应用HTML代码
内文将把内容作为文本,所以如果你有HTML标签,它将显示为文本
下面的例子引用了下面的HTML片段:
<div id="test">
Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
该节点将被下面的JavaScript引用:
var x = document.getElementById('test');
element.innerHTML
设置或获取描述元素后代的HTML语法
x.innerHTML
// => "
// => Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "
这是W3C DOM解析和序列化规范的一部分。注意,这是Element对象的属性。
node.innerText
设置或获取对象的开始标记和结束标记之间的文本
x.innerText
// => "Warning: This element contains code and strong language."
innerText was introduced by Microsoft and was for a while unsupported by Firefox. In August of 2016, innerText was adopted by the WHATWG and was added to Firefox in v45. innerText gives you a style-aware, representation of the text that tries to match what's rendered in by the browser this means: innerText applies text-transform and white-space rules innerText trims white space between lines and adds line breaks between items innerText will not return text for invisible items innerText will return textContent for elements that are never rendered like <style /> and ` Property of Node elements
node.textContent
获取或设置节点及其子节点的文本内容。
x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
虽然这是W3C标准,但IE < 9不支持它。
不知道样式,因此将返回由CSS隐藏的内容 不会触发回流流(因此性能更好) 节点元素属性
node.value
这取决于您所针对的元素。对于上面的例子,x返回一个HTMLDivElement对象,该对象没有定义value属性。
x.value // => null
例如,输入标记(< Input />)确实定义了一个值属性,它指的是“控件中的当前值”。
<input id="example-input" type="text" value="default" />
<script>
document.getElementById('example-input').value //=> "default"
// User changes input to "something"
document.getElementById('example-input').value //=> "something"
</script>
从文档中可以看出:
注意:对于某些输入类型,返回值可能不匹配 用户输入的值。例如,如果用户输入 非数值转换为<input type="number">,返回值 可能是一个空字符串。
示例脚本
下面是一个例子,它显示了上面HTML的输出:
var properties = ['innerHTML', 'innerText', 'textContent', 'value']; // Writes to textarea#output and console function log(obj) { console.log(obj); var currValue = document.getElementById('output').value; document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; } // Logs property as [propName]value[/propertyName] function logProperty(obj, property) { var value = obj[property]; log('[' + property + ']' + value + '[/' + property + ']'); } // Main log('=============== ' + properties.join(' ') + ' ==============='); for (var i = 0; i < properties.length; i++) { logProperty(document.getElementById('test'), properties[i]); } <div id="test"> Warning: This element contains <code>code</code> and <strong>strong language</strong>. </div> <textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行,而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 添加javascript选项选择
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
- 禁用从HTML页面中拖动图像