Thuộc tính innerHTML trong JavaScript
142 lượt xem
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. Để tìm hiểu rõ hơn về Thuộc tính innerHTML, mời bạn đọc tham khảo bài viết dưới đây.
Mục lục nội dung
1. 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>
2. 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>
Trên đây là hai ví dụ cụ thể để bạn hiểu rõ hơn về Thuộc tính innerHTML trong JavaScript. Hy vọng chúng hữu ích cho bạn, giúp bạn dễ hiểu hơn trong quá trình học lập trình. Chúc các bạn thành công!
Tham khảo thêm
- doc Đối tượng Document trong JavaScript
- doc Document.getElementById() trong JavaScript
- doc Document.getElementsByName() trong JavaScript
- doc Document.getElementsByTagName() trong JavaScript
- doc Thuộc tính innerText trong JavaScript
142 lượt xem
Ngày:05/11/2020
Chia sẻ bởi:Minh Ngoan
