Home  >  Article  >  Web Front-end  >  How to get the content of html element with jquery?

How to get the content of html element with jquery?

青灯夜游
青灯夜游Original
2020-11-18 15:40:365374browse

Jquery method to obtain the content of html elements: 1. Use html() to return the content of the selected element, the syntax is "$(selector).html()"; 2. Use text() to return The text content of the selected element, the syntax is "$(selector).text()".

How to get the content of html element with jquery?

The operating environment of this tutorial: windows10 system, jquery1.8.3. This article is applicable to all brands of computers.

[Related recommendations: jQuery video tutorial]

1. html(): Returns the original HTML document, but there may be compatibility in IE properties, as follows

  • Principle: Use innerHTML()
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p id="box">
		<p class="b2">我是一个p元素</p>
		<span>你好</span>
	</p>
</body>
<script src="libs/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		var str = $("#box").html();
		console.log(str);

		// <p>我是一个p元素</p>
		// <span>你好</span>

		//解释:该方法使用的是JS中的innerHTML()有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如,如果属性值只包含字母数字字符,Internet Explorer有时丢弃包裹属性值的引号
	});
</script>
</html>

2, text():Get the value of each element in the matching element set Merge text, including their descendants

  • .text() The method cannot be used on input elements or scripts elements, input or textarea You need to use the .val() method to get or set the text value
  • To get the value of the scripts element, use the .html() method
76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    b81e3c3ff067fcbe0ce184ae68e680b4
        bc613f5372b843792ba0fe2ec0bb1625我是一个p元素94b3e26ee717c64999d7867364b1b4a3
        45a2772a6b6107b401db3c9b82c049c2你好54bdf357c58b8a65c66d7c19c8e4d114
    94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
1816c451e8f9043103537cb0522474b52cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
    $(function(){        var str = $("#box").text();
        console.log(str);        // 我是一个p元素
        // 你好    });2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e

3. val() method

  • #The value of the element is set through the value attribute.
  • This method is mostly used for input elements.

For more programming-related knowledge, please visit: Programming Courses! !

The above is the detailed content of How to get the content of html element with jquery?. For more information, please follow other related articles on the PHP Chinese website!

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