HTML DOM Chọn phương thức add ()

Phương thức HTML select add () thêm một tùy chọn mới vào danh sách thả xuống trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

object.add(option,index)

Ví dụ

Hãy để chúng tôi xem một ví dụ về phương thức add () HTML DOM select -

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.1rem;
   }
   .drop-down{
      display:block;
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:2px;
      margin:1rem auto;
      outline:none;
   }
   .btn{
      background:orange;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      font-weight:bold;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Select add() method Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Biology</option>
</select>
<button type="button" onclick="addSubject()" class="btn">Add History Subject</button>
<div class="show"></div>
<script>
   function addSubject() {
      var dropDown = document.querySelector(".drop-down");
      document.querySelector(".show").innerHTML="Added History Subject";
      var option=document.createElement("OPTION");
      option.innerHTML="History";
      dropDown.add(option);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Chọn phương thức add ()

Nhấp vào “ Thêm chủ đề lịch sử ”Để thêm tùy chọn chủ đề lịch sử trong danh sách thả xuống.

HTML DOM Chọn phương thức add ()