fungsi text val html Archives

Fungsi text(), val(), dan html() merupakan tiga fungsi yang berguna pada jQuery untuk melakukan modifikasi pada tulisan di elemen HTML. Fungsi text() Fungsi text() digunakan untuk mengganti tulisan yang berada di elemen html seperti di heading atau di paragraf. Contoh ketika tombol Replace ditekan, maka tulisan heading akan berubah. index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery Tutorial 6</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h2 class="dope">You'll learn how to replace me</h2>
	
	<input type="button" value="Replace" id="btn_main" />

	<input type="button" value="Change HTML" id="btn_new" />

	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/insert.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JQuery Tutorial 6</title>

</head>

<body>

<h2 class="dope">You'll learn how to replace me</h2>

</body>

</html>

insert.js

$("#btn_main").on("click", function(){
	$(".dope").text("This is new replacement text");
	$("#btn_main").val("Double Click me");
});

$("#btn_main").on("dblclick", function(){
	$(".dope").text("You'll learn how to replace me");
	$("#btn_main").val("Replace");
});

$("#btn_new").on("click", function(){
	$(".dope").html('<b class="cool"> Hey There This is HTML </b>');
});

$("#btn_main").on("click", function(){

$(".dope").text("This is new replacement text");

$("#btn_main").val("Double Click me");

});

$("#btn_main").on("dblclick", function(){

$(".dope").text("You'll learn how to replace me");

$("#btn_main").val("Replace");

});

$("#btn_new").on("click", function(){

$(".dope").html('<b class="cool"> Hey There This is HTML </b>');

});

style.css

.timestwo {
	font-size: 2em;
}

.colorful {
	color: pink;
}

.cool {
	font-size: 2em;
	color: green;
}

.timestwo {

font-size: 2em;

}

.colorful {

color: pink;

}

.cool {

font-size: 2em;

color: green;

}

indocoder.com

Tag: fungsi text val html

Tutorial jQuery 4 : Fungsi text(), val(), dan html()