Đối tượng HR trong HTML DOM

Đối tượng HR trong HTML DOM đại diện cho phần tử <hr> - đường kẻ ngang phân tách chủ đề (thematic break).

Tạo hr object

document.createElement("HR");

Ví dụ

<!DOCTYPE html>
<html>
<style>
  body { text-align: center; background-color: #fff; color: #0197F6; }
  h1 { color: #23CE6B; }
  .btn { background-color: #fff; border: 2px solid #0197F6; height: 2rem; width: 40%; margin: 2rem auto; display: block; color: #0197F6; outline: none; cursor: pointer; border-radius: 20px; }
  hr { border-color: #db133a; margin: 1rem auto; width: 50%; }
</style>
<body>
<h1>Demo DOM HR Object</h1>
<button onclick="createHr()" class="btn">Tạo đường kẻ <hr></button>
<script>
  function createHr() {
    var hrElement = document.createElement("HR");
    document.body.appendChild(hrElement);
  }
</script>
</body>
</html>

Kết quả

Nhấn "Tạo đường kẻ <hr>" → xuất hiện đường kẻ ngang đỏ phân tách nội dung.

HTML5: <hr> mang ý nghĩa semantic "thematic break" (chuyển chủ đề), không chỉ đơn thuần đường kẻ. CSS: border-top để style.