Thuộc tính innerHTML trong JavaScript có thể được sử dụng để viết html động trên trang web html.
Nó được sử dụng chủ yếu trong các trang web để tạo ra html động như form đăng ký, form nhận xét, liên kết, v.v.
Ví dụ về thuộc tính innerHTML
Ví dụ tạo biểu mẫu html khi người dùng nhấp vào button.
Trong ví dụ này, chúng ta tự động viết biểu mẫu html bên trong thẻ div có id=”mylocation”. Chúng ta xác định vị trí này bằng cách gọi phương thức document.getElementById().
<script type="text/javascript">
function showcommentform() {
var data = "Name:<input type='text' name='name'>"
+ "<br>Comment:<br><textarea rows='5' cols='80'></textarea>"
+ "<br><input type='submit' value='Post Comment'>";
document.getElementById('mylocation').innerHTML = data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML
<html>
<head>
<title>First JS</title>
<script>
var flag = true;
function commentform() {
var cform = "<form action='Comment'>"
+ "Enter Name: <br><input type='text' name='name'/><br>"
+ "Enter Email: <br><input type='email' name='email'/><br>"
+ "Enter Comment: <br><textarea rows='5' cols='70'></textarea><br>"
+ "<input type='submit' value='Post Comment'/>"
+ "</form>";
if (flag) {
document.getElementById("mylocation").innerHTML = cform;
flag = false;
} else {
document.getElementById("mylocation").innerHTML = "";
flag = true;
}
}
</script>
</head>
<body>
<button onclick="commentform()">Comment</button>
<div id="mylocation"></div>
</body>
</html>