hello hello , we already learned two ways to get and set text when we learned native JS, do you remember? That is innerHTML and innerText , right, the use of these two basic native methods must have been a little confusing, right? Don't panic! Below I will take you to review these two methods.
Article directory:
1.1 html() for content acquisition
1.2 html() for content settings
1.3 The setting and acquisition of innerHTML [Native JS review and consolidation]
1.3.1 innerHTML gets the text content
1.3.2 innerHTML settings for text content
2.1 text() for content acquisition
2.2 text() settings for content
2.3 Setting and obtaining of innerText [Native JS review and consolidation]
1.3.1 innerText gets the text content
1.3.2 innerText setting of text content
One: html() and innerHTML
html() is a method of jQuery, it is equivalent to innerHTML, both can recognize HTML tags, so the element tags will be printed together when printing
1.1 html() for content acquisition
Get us directly without parameters, and the tags in the content will also get
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
console.log($('div').html());
</script>
</body>Output result:
You can see that html() also outputs the tags
1.2 html() for content settings
To set, just set the parameter to the text we want to change
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
$('div').html('1234567890');
</script>
</body>Output result:
You can see that our text content has been changed to what we want to set
1.3 The setting and acquisition of innerHTML [Native JS review and consolidation]
1.3.1 innerHTML gets the text content
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
var ele=document.querySelector('div')
console.log(ele.innerHTML);
</script>
</body>Output result:
innerHTML will also print the label
1.3.2 innerHTML settings for text content
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
var ele=document.querySelector('div')
ele.innerHTML='123456'
</script>
</body>Output result:
The text content has been changed to what we want to set
Two: text() and innerText
text() is a method of jQuery, which is equivalent to innerText. The two do not recognize HTML tags, so the element tags will not be printed together when printing. It is different from the previous two. Note! !
2.1 text() for content acquisition
If we get it, we can just have no parameters. Note that the difference is that the tags in the content will not be obtained.
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
console.log($('div').text());
</script>
</body>Output result:
The content is printed, the tags in the content are not printed
2.2 text() settings for content
To set, just set the parameter to the text we want to change
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
$('div').text('1234');
</script>
</body>Output result:
The text content is changed to the value we want to set
2.3 Setting and obtaining of innerText [Native JS review and consolidation]
1.3.1 innerText gets the text content
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
var ele=document.querySelector('div')
console.log(ele.innerText);
</script>
</body>Output result:
innerText doesn't type out the label
1.3.2 innerText setting of text content
<body>
<div>
<p>我是一段文本</p>
</div>
<script>
var ele=document.querySelector('div')
ele.innerText='123';
</script>
</body>Output result:
The content is changed to the value you want to set
[Creating is not easy, give a follow and like and go, thank you! ! 】