Home > Article > Web Front-end > How to replace content in tags with jquery
How to replace content in tags with jquery
- WBOYOriginal
- 2022-01-14 11:24:124149browse
In jquery, you can use the html() method to replace the content in the tag. The function of this method is to return or set the content of the selected element. When this method is used without setting parameters, the selected element will be returned. The current content of the element, the syntax is "$(element).html("new content")".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How jquery replaces the content in the tag
html() method returns or sets the content of the selected element (inner HTML).
If this method does not set parameters, it returns the current content of the selected element.
Return element content
When using this method to return a value, it returns the content of the first matching element.
Syntax
$(selector).html()
Set element content
When you set a value using this method, it overwrites the content of all matching elements.
Syntax
$(selector).html(content)
content Optional. Specifies the new content of the selected element. This parameter can contain HTML tags.
Use functions to set the content of elements
Use functions to set the contents of all matching elements.
Syntax
$(selector).html(function(index,oldcontent))
function(index,oldcontent) specifies a function that returns the new content of the selected element.
index - Optional. Receives the index position of the selector.
oldcontent - Optional. Receives the current contents of the selector.
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").html("这是<b>新的</b>内容");
});
});
</script>
</head>
<body>
<p>这是旧的内容</p>
<p>这也是旧的内容</p>
<button class="btn1">改变 p 元素的内容</button>
</body>
</html>Output result:
The above is the detailed content of How to replace content in tags with jquery. For more information, please follow other related articles on the PHP Chinese website!