温馨提示×

js中textContent、innerText和innerHTML怎么用

js
小亿
201
2024-02-20 18:14:23
栏目: 编程语言
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

textContent、innerText和innerHTML都是用来访问和设置元素内容的属性。

  1. textContent:textConent返回元素的所有文本内容,包括子元素中的文本。可以用来获取或设置一个元素的文本内容。

例子:

let element = document.getElementById("example");
console.log(element.textContent); // 获取元素的文本内容
element.textContent = "这是新的文本内容"; // 设置元素的文本内容
  1. innerText:innerText返回元素的可见文本内容,不包括隐藏的元素和样式的文本。可以用来获取或设置一个元素的可见文本内容。

例子:

let element = document.getElementById("example");
console.log(element.innerText); // 获取元素的可见文本内容
element.innerText = "这是新的可见文本内容"; // 设置元素的可见文本内容
  1. innerHTML:innerHTML返回元素的所有HTML内容,包括标签和文本。可以用来获取或设置一个元素的HTML内容。

例子:

let element = document.getElementById("example");
console.log(element.innerHTML); // 获取元素的HTML内容
element.innerHTML = "<p>这是新的HTML内容</p>"; // 设置元素的HTML内容

总结:textContent用于获取和设置元素的文本内容,innerText用于获取和设置元素的可见文本内容,innerHTML用于获取和设置元素的HTML内容。根据需要选择合适的属性来操作元素内容。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:innerHTML和textContent有何不同

0