Home > Article > Web Front-end > jquery element content: html(), text(), val()

jquery element content: html(), text(), val()

无忌哥哥Original: 2018-06-29 14:09:041466browse

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的内容: html(),text(),val()</title>
</head>
<body>
<div></div>
<form>
邮箱: <input type="text" name="email">
<button>提交</button>
</form>
</body>
</html>

html() is the same as attr(), css(), and has its own reading and setting functions depending on the parameters

1. Set element content, which can include any content: child elements or text, the same as the native innerHTML attribute

Create text node

var res = $(&#39;div&#39;).html(&#39;jQuery真的好方便&#39;)

Create element node

var res = $(&#39;div&#39;).html(&#39;<h2>jQuery真的好方便</h2>&#39;)

Get element content

var res = $(&#39;div&#39;).html()

2. Get the text content in the element: similar to the textContent attribute in the native

Get the text in a single label, the sub-element label5fe4c2ef79905ad223c4c63e23f85e2aFilter out, leaving only the text part

var res = $(&#39;div&#39;).text()

If the element content has multiple sub-elements, the text of these sub-elements will be merged

var res = $(&#39;div&#39;).html(&#39;<h2>jQuery真的好方便</h2><p>大家要好好学</p>&#39;)

Let’s use html() output to take a look

var res = &#39;html()输出:&#39;+$(&#39;div&#39;).html()

Use the text() method to output again, compare the two output results, pay attention to the use of newlines in the console\n

res += &#39;\n&#39; + &#39;text()输出:&#39; + $(&#39;div&#39;).text()

If text() has parameters, it is a setting operation

var res = $(&#39;div&#39;).text(&#39;祝愿大家早日成为一名合格的Web开发程序员&#39;)

3. Get or set the data in the form control: val(), which is equivalent to the value attribute of the form element in the native

$(&#39;button&#39;).click(function(){

Read the value of the value attribute

alert($(&#39;:text&#39;).val())

Set The value of the value attribute

$(':text').val('zhu@php.cn')
alert($(&#39;:text&#39;).val())
})

Console view results

console.log(res)

The above is the detailed content of jquery element content: html(), text(), val(). For more information, please follow other related articles on the PHP Chinese website!

jquery css html innerHTML

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the usage of v-bind in VUENext article：Introduction to the usage of v-bind in VUE

See more

jquery element content: html(), text(), val()

Related articles