Use jquery to replace names in HTML

Hao Hongjun 2023-11-20 22:13:53 Note: This method is not as good as using Django’s template tag variable method, because your web project will be developed with Django anyway, so in this case, why not use Django’s template What about the method of labeling variables?

Idea: Put the names that often need to be modified in the web page in a js file written with jquery. If you need to modify the name, just modify the name in the js file directly.

Create a new name_07.html file and write the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>it is title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <script src="E:/HTML_code/static/jquery-3.5.1.slim.js"></script>
</head>
<body>

<h1 id="title01"></h1>
<h2 id="title02"></h2>
<h3 id="title03_1"></h3>
<h3 id="title03_2"></h3>

<script src="namelib07.js"></script>

</body>
</html>

Then create a new file namelib07.js in the directory where name_07.html is located, and write the following code:

$(document).ready(function() {
    
    
    var title01str = "这是标题01";
    var title02str = "这是标题02";
    var title03str = "这是标题03";

    $("#title01").text(title01str);
    $("#title02").text(title02str);
    $("#title03_1").text(title03str);
    $("#title03_2").text(title03str);

});

Open name_07.html with a browser, the effect is as follows:
Insert image description here
In this way, if we need to modify a certain title name, we can modify the value of the corresponding string variable.

For the usage of jquery method text(), please refer to the blog post https://blog.csdn.net/wenhao_ir/article/details/134437312

Guess you like

Origin blog.csdn.net/wenhao_ir/article/details/134441919