Hướng dẫn what is innerhtml function?

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.

Nội dung chính Show

1. Cú pháp innerHTML trong javascript
2. Cách dùng innerHTML trong javascript
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
Video – DOM – Xử lý các phần tử HTML trong Javascript
Hướng dẫn chi tiết
DOM là gì?
Tập các thiết lập định dạng của phần tử hiện tại.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.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

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

0.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

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

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.

Thuộc tính innerHTML trong JavaScript có thể được sử dụng để viết html động trên trang web html. 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ụ 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.

Nội dung chính ShowShow

1. Cú pháp innerHTML trong javascript
2. Cách dùng innerHTML trong javascript
Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML
Video – DOM – Xử lý các phần tử HTML trong Javascript
Hướng dẫn chi tiết
DOM là gì?
Truy xuất các phần tử

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.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

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

0.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

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

1. Cú pháp innerHTML trong javascript

2. Cách dùng innerHTML trong javascript

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

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

Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML :

Video – DOM – Xử lý các phần tử HTML trong Javascript

Hướng dẫn chi tiết
DOM là gì?

2. Cách dùng innerHTML trong javascript

Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML

Video – DOM – Xử lý các phần tử HTML trong Javascript

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

Hướng dẫn chi tiết

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";

DOM là gì?

Truy xuất các phần tử có thể được sử dụng để viết html động trên trang web html.

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

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

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

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

<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 viết này được đăng tại [free tuts .net]

Video – DOM – Xử lý các phần tử HTML trong Javascript

Hướng dẫn chi tiết

DOM là gì?

Truy xuất các phần tử là tên gọi tắt của (Document Object Model – tạm dịch Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript, PHP, Python. Trong phạm vi bài học này, mình sẽ dùng ngôn ngữ Javascript và HTML DOM

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

DOM – Xử lý các phần tử HTML trong Javascript

Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ .: chính là tài liệu HTML, thường được biểu diễn bởi thẻ .

Nút phần tử: biểu diễn cho 1 phần tử HTML.: biểu diễn cho 1 phần tử HTML.

Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ , tên đề mục trong thẻ , hay một đoạn văn trong thẻ .: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ , tên đề mục trong thẻ , hay một đoạn văn trong thẻ .

Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment node).nút thuộc tính (attribute node) và nút chú thích (comment node).

Mong các bạn dành vài giây cho QUẢNG CÁONói chung đây là một quảng cáo về Hosting Azdigi để Góc Làm Web sẽ có một ít tiền để duy trìMình đang sử dụng và thấy nó nhanh, rẻ và dễ sử dụng. Các bạn dùng thử nhé.Link đăng ký: https://my.azdigi.com/aff.php?aff=1612Các thuộc tính của nút phần tử elementNói chung đây là một quảng cáo về Hosting Azdigi để Góc Làm Web sẽ có một ít tiền để duy trìMình đang sử dụng và thấy nó nhanh, rẻ và dễ sử dụng. Các bạn dùng thử nhé.Link đăng ký: https://my.azdigi.com/aff.php?aff=1612Các thuộc tính của nút phần tử element

Thuộc tính	Ý nghĩa
id	Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng.
className	Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử.
tagName	Tên thẻ HTML.
innerHTML	Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần tử và nút văn bản.
outerHTML	Trả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML.
textContent	Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên trong phần tử hiện tại.
attributes	Tập các thuộc tính như id, name, class, href, title…
style	Tập các thiết lập định dạng của phần tử hiện tại.
value	Lấy giá trị của thành phần được chọn thành một biến.

Các phương thức xử lý các nút phần tử

Phương thức	Ý nghĩa
id	Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng.
className	Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử.
tagName	Tên thẻ HTML.
innerHTML	Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần tử và nút văn bản. outerHTML
Trả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML.	textContent
Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên trong phần tử hiện tại.	attributes
Tập các thuộc tính như id, name, class, href, title…	style

Tập các thiết lập định dạng của phần tử hiện tại.

value

Lấy giá trị của thành phần được chọn thành một biến.

Các phương thức xử lý các nút phần tử

Phương thức

getElementById(id) value và thuộc tính tự định nghĩa là gia_tri của input và xuất ra div bên dưới

Tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần tìm.

getElementsByTagName(tagname) getElementById(“input_1”) để xác định phần tử cần xử lý

Tham chiếu đến tất cả các nút có thuộc tính tagName giống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụng document.getElementsByTagName(‘*’).

getElementsByName(name) getAttribute(“gia_tri)

Tham chiếu đến tất cả các nút có thuộc tính name cần tìm.

getAttribute(attributeName)

Lấy giá trị của thuộc tính.

Xem thêm: F5 Là Gì – Nhấn F5 Cho Cuộc Sống

setAttribute(attributeName, value)

Sửa giá trị của thuộc tính. setAttribute(“tên thuộc tính”, gái trị) để thêm thuộc tính.

appendChild(node)

Thêm 1 nút con vào nút hiện tại.

removeChild(node)

Xóa 1 nút con khỏi nút hiện tại.

Truy xuất các phần tử

Có 2 phương pháp truy xuất các phần tử trong DOM là truy xuất gián tiếp (dựa theo vị trí của phần tử so với nút gốc để truy xuất), và truy xuất trực tiếp (dựa theo các định danh như id, class, tag name … để truy xuất).phương thức createElement()

Mình sẽ dùng phương pháp trực tiếp, vì nó chính xác vì dễ dàng hơn. gán thuộc tính innerHTML.

Truy xuất và lấy giá trị, thuộc tính phương thức appendChild() để thêm phần tử được khởi tạo.

Muốn lấy giá trị, chúng ta phải xác định được phần tử html. Các bạn xem ví dụ sau nhé:

Chúng ta sẽ lấy value và thuộc tính tự định nghĩa là gia_tri của input và xuất ra div bên dưới

Hướng dẫn:

+ Dùng phương thức getElementById(“input_1”) để xác định phần tử cần xử lý

+ Lấy dữ liệu của thuộc tính value bằng cách truy xuất thuộc tính value của phần tử

+ Lấy dữ liệu của thuộc tính tự định nghĩa gia_tri bằng phương thức getAttribute(“gia_tri)gán lại thuộc tính style.backgroundColor cho phần tử.

+ Lấy dữ liệu trong phần tử khối div bằng cách truy xuất thuộc tính innerHTML. Ngược lại, để gán giá trị bên trong khối div bằng cách gán thuộc tính innerHTML.bỏ dấu gạch ngang và viết hoa chữ cái đầu mỗi từ ( trừ từ đầu tiên).

Đó là tất cả nội dung của bài học. Các bạn xem video nếu cần hướng dẫn chi tiết nhé.

Xem thêm: ” Suburb Là Gì ? Nghĩa Của Từ Suburb Trong Tiếng Việt Nghĩa Của Từ Suburb Trong Tiếng Việt

Code mẫu: DownloadDownload

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.