text() html() val() innerHTML innerText的区别

参考

text()用于html元素文本内容的存取

html()不仅可以用于文本内容的存取，还可用于html内容的存取

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

<div id="box1"><p>test</p></div>
<script>
    console.log('text():--'+$('#box1').text())
    console.log('html():--'+$('#box1').html())
    $('#box1').text('1234')
    console.log('text():--'+$('#box1').text())
</script>

</body>
</html>

输出：

val()用于input元素内容的存取

 

 

html() innerHTML的区别

html() 方法设置或返回被选元素的内容。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容

 

innerHTML可获取或设置指定元素标签内的 html内容

 

 html

innerHTML

 

innerHText  innerHTML的区别

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

获取元素的内容：element.innerHTML;

给元素设置内容：element.innerHTML =htmlString;

 

innerText属性可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

获取元素的内容：element.innerText;

给元素设置内容：element.innerText = string;

 页面看到的：

 html中

 总结：

使用innerHTML 设置指定元素的内容时，会识别指定内容中的标签，但innerText不会

 其次，最好通过DOM来设置innerHTML 和innerText属性，比如 document.getElementById('milestone_des_div').innerText = mile_des

 

 

 

 

 

 

 

posted @ 2023-04-21 11:06  声声慢43  阅读(13)  评论(0)  编辑  收藏  举报