html()、text()、val()、innerHTML()、innerText()、value()的用法与区别

  ·   JavaScript   ·   jQuery     浏览量:

用法

  • html(): 设置或返回匹配的元素集合中的HTML内容,包括(html)。
  • text(): 设置或返回匹配元素的内容,不包括(html)。
  • val(): 用于获取设置了value属性的值,大多用于 input 元素。

区别

  • 名字不一样(废话)。
  • html()、text()、val()是jQuery中的方法,分别对应js中的innerHTML、innerText和value。
  • 前者有括号,后者没有。
  • 赋值方法jq用(),js用=
  • html()、val()取值只会获取对应匹配的第一个元素,赋值会覆盖所有匹配元素。
  • text()取值、赋值都会匹配所有元素。

例子

html

<div class="out">
    <p>文字一</p>
</div>
<div class="out">
    <p>文字二</p>
</div>
<input type="text" class="ipt" value="input一">
<input type="text" class="ipt" value="input二">

js/jq

console.log($('.out').html()); // <p>文字一</p>
console.log($('.out').text()); // 文字一 文字二
console.log($('.ipt').val());  // input一

console.log(document.getElementsByClassName('out')[0].innerHTML); // <p>文字一</p>
console.log(document.getElementsByClassName('out')[0].innerText); // 文字一
console.log(document.getElementsByClassName('ipt')[0].value); // input一


收起 >>
html()、text()、val()、innerHTML()、innerText()、value()的用法与区别