Phương thức add() của Select trong HTML DOM

Phương thức add() của HTML DOM Select 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

Cú pháp như sau:

object.add(option,index)

Ví dụ

Dưới đây là ví dụ về phương thức add() của 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>Demo phương thức add() của DOM Select</h1> <p>Chào bạn, hãy chọn môn học yêu thích:</p> <select class='drop-down' name="Drop Down List"> <option>Vật lý</option> <option>Sinh học</option> </select> <button type="button" onclick="addSubject()" class="btn">Thêm môn Lịch sử</button> <div class="show"></div> <script>    function addSubject() {       var dropDown = document.querySelector(".drop-down");       document.querySelector(".show").innerHTML="Đã thêm môn Lịch sử";       var option=document.createElement("OPTION");       option.innerHTML="Lịch sử";       dropDown.add(option);    } </script> </body> </html>

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

Nhấn vào nút 「Thêm môn Lịch sử」 để thêm tùy chọn Lịch sử vào danh sách thả xuống.