QUIZGUM

Coding Class

Quizgum : changing text

change text

What we will learn today is the text() and html() functions.

text()

If the content of a p tag contains hello, you can change it to konnichiha using text().

Is it amazing? Then shall we try?

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').text('konnichiha');

This changes the text enclosed by change_greeting to konnichiha.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
    $('.change_greeting').text('konnichiha');
});
</script>
</head>
<body>
    <p class="change_greeting">hello</p>
</body>
</html>

Click on the Run Source button to see the results.
Did you check the results?
Konnichiha is not output, but hello?
When you supply electricity to the motor, does the motor rotate quickly in the forward direction?
Does the diode emit light when the LED is powered?
Conversely, if you turn the motor in reverse, the motor produces electricity.
What happens if we supply light in reverse to the light emitting part of the LED?
LEDs produce electricity in reverse.
If you don't write anything in text(), it will fetch the text of the corresponding element.
If you put a phrase in parentheses of text(), the text of the corresponding element is changed to the phrase in parentheses.
Conversely, if you do not write anything, there is a function that brings the text wrapped by the corresponding element.
The following is the source that wraps the text hello wrapping the text hello of jquery and brings up the alert window.

HTML

<p class="hello">hello</p>

jQuery

var i = $('.hello').text();
alert(i);

Check it out by clicking the View on Source Web button below.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
    $(function(){
        var i = $('.hello').text();
        alert(i);
    });
</script>
</head>
<body>
    <p class="hello">hello</p>
</body>
</html>

I learned about text().
Now let's look at html();

html()

html() is similar to text().
text() only loads text, but html() also loads html tags.

$('.class_Name').html('<p>hello</p>');

You can use tags inside parentheses as above.
I'll change the text() example above to html. This source changes hello to bold konnichiha.

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').html('<b>konnichiha</b>');

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
    $('.change_greeting').html('<b>konnichiha</b>');
});
</script>
</head>
<body>
    <p class="change_greeting">hello</p>
</body>
</html>