JavaScript中innerHTML, innerText和value的区别是什么?
当前回答
不过,与innerText不同的是,innerHTML允许您使用HTML富文本,并且不会自动对文本进行编码和解码。换句话说,innerText检索并将标记的内容设置为纯文本,而innerHTML检索并设置为HTML格式的内容。
其他回答
1)内部网页
设置标记内的所有HTML内容 返回标记内的所有HTML内容 包括样式+空白
2) innerText
设置标记内的所有内容(使用标记对应的换行符) 返回标签内的所有HTML内容(带有标签对应的换行符) 忽略标签(只显示文本) 忽略样式+空白 如果我们有style:"visibility:hidden;"内标签 |_ innerText包含样式->隐藏内容
(3) textContent
设置标签内的所有内容(没有标签对应的换行符) 返回标签内的所有内容(没有标签对应的换行符) 包括空格 如果我们有style:"visibility:hidden;"内标签 |_ textContent忽略样式->显示内容 textContent具有更好的性能,因为它的值不会解析为HTML。
InnerText属性对内容进行html编码,将<p>转换为<p>等等。如果你想插入HTML标签,你需要使用InnerHTML。
下面的例子引用了下面的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>
InnerText将仅以纯文本形式返回页面的文本值,其中每个元素在换行符上,而innerHTML将返回body标记内所有内容的HTML内容,而childNodes将返回一个节点列表,顾名思义。
innerText属性返回html元素的实际文本值,而innerHTML返回html内容。在下面的例子:
var element = document.getElementById('hello'); element.innerText = '<strong> hello world </strong>'; console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText); console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML); element.innerHTML = '<strong> hello world </strong>'; console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText); console.log(element.innerHTML); <p id="hello"> Hello world </p>
推荐文章
- 如何使用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页面中拖动图像