How to manipulate text using jQuery?-JS Tutorial-php.cn

How to manipulate text using jQuery?

How to use jQuery to manipulate text?

In web development, manipulating text content is a very common requirement, and the jQuery library provides a series of convenient and fast methods to manipulate text. This article will introduce some commonly used jQuery methods and sample codes to help readers better understand how to use jQuery to manipulate text.

1. Get text content

To get the text content of an element, you can use the text() method. The sample code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery操作文本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myText">这是一个文本内容</div>

<script>
    var text = $('#myText').text();
    console.log(text);
</script>

</body>
</html>

Copy after login

In the above code, the ## with the id myText is obtained through the $('#myText').text() method. The text content of the #

element and prints it to the console.

2. Set text content

To set the text content of an element, you can use the

text() method or the html() method. Here is an example using the text() method:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery操作文本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myText">这是一个文本内容</div>

<button id="changeText">点击修改文本</button>

<script>
    $('#changeText').click(function(){
        $('#myText').text('修改后的文本内容');
    });
</script>

</body>
</html>

Copy after login

In the above code, when the button is clicked, the text content of the

element will Modified to modified text content.

3. Append text content

If you need to append content after the original text content of the element, you can use the

append() method. The sample code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery操作文本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myText">这是原始文本内容</div>

<button id="appendText">点击追加文本</button>

<script>
    $('#appendText').click(function(){
        $('#myText').append('，追加的文本内容');
    });
</script>

</body>
</html>

Copy after login

In the above code, when the button is clicked, the text content of the

element will be appended with after the original content, and the appended text content .

4. Replace text content

If you need to completely replace the text content of an element, you can use the

replaceWith() method. The sample code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery操作文本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myText">这是原始文本内容</div>

<button id="replaceText">点击替换文本</button>

<script>
    $('#replaceText').click(function(){
        $('#myText').replaceWith('<div>替换后的文本内容</div>');
    });
</script>

</body>
</html>

Copy after login

In the above code, when the button is clicked, the text content of the

element will be replaced with the replaced text content. Through the above sample code, readers can learn how to use jQuery to obtain, set, append and replace text content. jQuery provides a concise and powerful method that can operate text conveniently and quickly, helping developers realize various complex text operation requirements. Hope this article is helpful to readers.

The above is the detailed content of How to manipulate text using jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

Programming skills Use jquery Action text

source：php.cn

Previous article：Master the common functions and practical application cases of jQuery Next article：Understand the methods and usage techniques of event delegation in jQuery

Statement of this Website

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