jQuery HTML – Get và Set Content, Attributes

Chào bạn! Trong quá trình làm việc với jQuery, một trong những thao tác phổ biến nhất là lấy (get) và gán (set) nội dung HTML hoặc các thuộc tính (attributes) của phần tử. Bài viết này sẽ giúp bạn hiểu rõ cách sử dụng các hàm jQuery như .html(), .text(), .val(), và .attr() để làm chủ việc tương tác DOM.

1. Lấy (Get) nội dung HTML và text

.html()

• Công dụng: Lấy nội dung HTML bên trong một phần tử (bao gồm cả thẻ HTML).

let content = $("#demo").html();
console.log(content);

Ví dụ: Nếu <div id="demo"><b>Hello</b></div> → kết quả là "<b>Hello</b>"

.text()

• Công dụng: Lấy nội dung chỉ text, loại bỏ tất cả thẻ HTML.

let text = $("#demo").text();
console.log(text);

Với phần tử như trên, kết quả sẽ là "Hello"

.val()

• Công dụng: Dùng với các input field để lấy giá trị người dùng nhập vào.

let name = $("#nameInput").val();
console.log(name);

Dành cho <input id="nameInput" value="John"> → kết quả là "John"

2. Gán (Set) nội dung HTML, Text, và Value

.html("...")

• Thay thế nội dung HTML của phần tử.

$("#demo").html("<i>Xin chào!</i>");

.text("...")

• Gán nội dung dạng văn bản (sẽ không hiểu thẻ HTML).

$("#demo").text("<i>Không in nghiêng</i>");

.val("...")

• Dùng để gán giá trị cho input field.

$("#nameInput").val("CodeTutHub");

3. Lấy và Gán thuộc tính (Attributes)

.attr("ten-thuoc-tinh") – Get

let link = $("#myLink").attr("href");

.attr("ten-thuoc-tinh", "gia-tri") – Set

$("#myLink").attr("href", "https://codetuthub.com");

4. Ví dụ

<p id="info">Xin chào <span>CodeTutHub</span></p>
<input id="email" value="user@example.com" />
<a id="myLink" href="https://google.com">Google</a>

<script>
// Lấy nội dung có thẻ
console.log($("#info").html()); // "Xin chào <span>CodeTutHub</span>"

// Lấy nội dung chỉ text
console.log($("#info").text()); // "Xin chào CodeTutHub"

// Thay đổi nội dung
$("#info").html("Chào bạn đến với <b>jQuery</b>");

// Lấy và đổi thuộc tính
console.log($("#myLink").attr("href")); // "https://google.com"
$("#myLink").attr("href", "https://codetuthub.com");

// Lấy và set input value
console.log($("#email").val()); // "user@example.com"
$("#email").val("newuser@codetuthub.com");
</script>

Kết quả: (Nhấn F12 để xem console log)

🎯 Kết luận

Việc get/set nội dung và thuộc tính trong jQuery rất đơn giản và cực kỳ hữu ích trong các thao tác cập nhật DOM mà không cần reload lại trang. Hãy luyện tập thường xuyên để nhuần nhuyễn các hàm .html(), .text(), .val() và .attr() nhé!