Trong javascript, sử dụng document.getelementbyid().innerhtml để làm gì?

Thuộc tính innerHTML trong JavaScript có thể được sử dụng để viết html động trên trang web html.

Nội dung chính Show

Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML
1. Cú pháp innerHTML trong javascript
2. Cách dùng innerHTML trong javascript
Cách sử dụng

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ụ 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>

Trong bài này chúng ta sẽ tìm hiểu thuộc tính innerHTML trong Javascript, đây là một thuộc tính có sẵn trong các node object.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Công dụng của innerHTML là giúp ta lấy nội dung hoặc thiết lập nội dung cho một node html nào đó. Nếu bạn sử dụng jQuery thì có phương thức $(node).html().

1. Cú pháp innerHTML trong javascript

Cú pháp của innerHTML như sau:

// lấy nội dung
let content = node.innerHTML;

// Gán nội dung
node.innerHTML = newContent;

Trong đó:

Bài viết này được đăng tại [free tuts .net]

newContent chính là nội dung bạn muốn gán vào node
node chính là đối tượng cần lấy hoặc cần gán nội dung.

2. Cách dùng innerHTML trong javascript

Ví dụ innerHTML javascript:

Giả sử ta có đoạn code HTML như sau.

<div id="node">
    Học JS tại freetuts.net
</div>

Để lấy nội dung hoặc gán nội dung vào thẻ này thì ta sẽ sử dụng thuộc tính innerHTML.

let node = document.getElementById('node');
// lấy nội dung
let content = node.innerHTML;

// Gán nội dung
node.innerHTML = "Học JS Node tại freetuts.net";

Trên là những thông tin bạn cần biết về thuộc tính innerHTML trong javascript.

Phương thức getElementById() sẽ trả về phần tử có thuộc tính ID được cung cấp. Phương thức này là một trong số những phương thức phổ biến nhất của HTML DOM, nó được sử dụng rất thường xuyên để thao tác hoặc lấy thông tin của form hoặc một phần tử bất kỳ.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Phương thức sẽ trả về Null nếu không có phần tử nào có thuộc tính ID được cung cấp.

Một ID chỉ nên được sử dụng cho một phần tử, tuy nhiên nếu có nhiều phần tử cùng sử dụng một ID, Phương thức sẽ trả về phần tử đầu tiên xuất hiện trên trang.

Cú pháp

Cú pháp: document.getElementById(elementID)

Bài viết này được đăng tại [free tuts .net]

elementID là ID của phần tử sẽ được tìm kiếm.

Cách sử dụng

Định dạng màu chữ cho phần tử có id="result":

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2>    
        <p id="result">Đây là thẻ có id="result"</p>
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
            function myFunction(){
                document.getElementById("result").style.color = "red";
                document.getElementById("result").style.fontSize = "20px";
                document.getElementById("result").style.fontWeight = "bold";
            }
        </script>
    </body>
</html>

Tham khảo: w3schools.com