By reading this article, you will understand how to rewrite HTML elements using jQuery functions, so be sure to check it out!
Table of contents
- How to rewrite HTML elements with jQuery’s html function
- get element with html function
- rewrite element with html function
- add element with html function
- How to rewrite characters in HTML elements with jQuery’s text function
- Get HTML element with text function
- Rewrite HTML element with text function
- Add HTML element with text function
- Use the val function to rewrite the characters in the input tag
- How to rewrite multiple characters at once with jQuery’s replace function
- summary
How to rewrite HTML elements with jQuery’s html function
The html functions available in jQuery can get the information of the specified HTML element.
It is a jQuery function that is suitable for rewriting HTML elements because it is possible to add or rewrite elements to the acquired data.
By using html functions, you can get the data of HTML elements and manipulate them freely.
Also, if there are multiple types of the specified HTML element, only the first HTML element is targeted.
I will explain how to get, add, and rewrite elements with html functions.
get element with html function
When getting the element with the html function, enter as follows.
In the html function I get the inline element of the element I set. Therefore, when getting an element with the html function, enter the parent element of the element you want to get.
You can get the inline element of the specified element by entering “.html()” after the element.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class="container">
<p class="test">jQueryテスト</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
alert($('.container').html());
</script>
</body>
</html>The content of the container class is obtained with the html function, and the content obtained with the alert function is displayed.
The alert function can display a popup in the center of the screen when displayed in a browser.
Using the alert function is convenient because you can check the contents obtained by jQuery on the browser.
Execution result
As shown above, the p tag, which is a child element of the container class, and its contents are popped up.
Remember how to get an element using the html function, as it will be the basis for adding or rewriting elements.
rewrite element with html function
When rewriting the element with the html function, enter as follows.
Get the parent element of the element you want to rewrite, and enter the content of the element you want to rewrite in the html function .
Also, if you specify an element with only letters as an inline element like p tag or a tag, you can rewrite the letters in the element.
I will explain how to rewrite the whole element and how to rewrite only the characters in the tag with sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class="container">
<p class="test">jQueryテスト</p>
</div>
<p class="test2">jQueryテスト2</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.container').html('<a href=
$('.test2').html("
</script>
</body>
</html>The first jQuery code in the script tag acquires the container class and rewrites the inline element p tag to an a tag with the html function.
In the second code, the text “jQuery Test 2”, which is an inline element of test2, which is the attribute value of the p tag, is rewritten to “rewrite the text in the element”.
Execution result
When using quotes “”” or “”” within the rewritten element, do not use the same quotes. Using the same quotes will cause an error because you will not know what range each quote refers to.
add element with html function
If you want to add an element with the html function, enter as follows.
The method and contents of rewriting the element are almost the same, enter the value before adding and the value to be added in the argument of the html function .
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class="container">
<p class="test">jQueryテスト</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.container').html('<p class="test">jQueryテスト</p><button href="#">ら</button>');
</script>
</body>
</html>In the above code, a button tag is added to the p tag that specifies the container class and outputs “jQuery test”.
Execution result
How to rewrite characters in HTML elements with jQuery’s text function
jQuery’s text function is a function that can rewrite, get, and add characters in the specified HTML element.
By specifying h1 tags and p tags with the text function, you can freely manipulate the title and article content.
The text function is written as follows.
text()I will explain how to rewrite, get, and add characters in HTML elements.
Get HTML element with text function
How to get the HTML element with the text function is as follows.
I will explain how to use it with sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
alert($("p").text());
</script>
</body>
</html>By specifying the p tag, the character information “test” in the tag is obtained with the text function.
Execution result
Rewrite HTML element with text function
How to rewrite an HTML element with the text function is as follows.
You can rewrite the content of the obtained HTML element to the characters entered in the argument of the html function.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("p").text("");
</script>
</body>
</html>Execution result
Add HTML element with text function
Here’s how to add an HTML element with the text function.
The point is that the characters before being added to the argument of the html function are also displayed.
If you enter only the character you want to add, it will be rewritten to that element and output, so let’s enter the character that was displayed before adding and the character to be added.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("p").text("！");
</script>
</body>
</html>Since the word “test” is entered in the p tag to which you want to add text, specify the two sentences “test” and “I added it!” to the text function.
Execution result
Use the val function to rewrite the characters in the input tag
The val function is a function that can get the value of the value attribute specified in the HTML tag .
The characters in the input tag are specified by the value attribute and cannot be obtained with the text function or the html function, so the val function is used to rewrite them.
The method to rewrite the characters in the input tag with the val function is as follows.
If there are multiple input tags, it is a good idea to specify the class or id within the tag.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<input value="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("input").val("！");
</script>
</body>
</html>Execution result
How to rewrite multiple characters at once with jQuery’s replace function
The replace function can rewrite a part of the specified sentence to any character.
By using the html function and replace function, it is possible to specify multiple elements and rewrite each character at once.
The input method of the replace function is as follows.
The sample code explains how to select multiple items in detail.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<p class="test">replace</p>
<p class="test">replaceの</p>
<p class="test">replace</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$(".test").each(function(){
var text = $(this).html();
$(this).html(text.replace("replace",""));
});
});
</script>
</body>
</html>The each function can process multiple specified objects.
By using the each function and this to iterate through the test class from top to bottom, multiple elements can be specified.
Assign the data of each test class obtained by this and html function to the text variable. Specify the replace function in the value of the text variable to rewrite the characters.
Output the rewritten data with the html function and the process is complete.
Execution result
summary
This time, I explained how to rewrite HTML with jQuery. How was it?
html function when rewriting the entire HTML element with jQuery . Use the text function to rewrite only the characters.
Also, when rewriting multiple characters at once, you can specify multiple elements with the each function and rewrite with the replace function.
You can freely rewrite HTML by using different jQuery functions according to the purpose.
