Thuộc tính innerHTML trong JavaScript – VietTuts



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.

[external_link_head]

[external_link offset=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.

[external_link offset=2]

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> 



[external_footer]

Viết một bình luận