Tạo tùy chọn chọn HTML sử dụng thuộc tính hoặc thuộc tính

Question

Tôi muốn tạo HTML theo cách lập trình selectoption bằng cách sử dụng Javascript (không phải jQuery). những giá trị của việc tạo ra nó bằng cách thiết lập các thuộc tính là gì như sau:

var option = document.createElement('option'); 
option.setAttribute('text', 'option1'); 
option.setAttribute('value', 5); 
option.setAttribute("selected", true); 

như trái ngược với các thuộc tính thiết lập:

var option = document.createElement('option'); 
option.text = 'option1'; 
option.value = 5; 
option.selected = true; 

tôi muốn tạo ra các tùy chọn sử dụng tài sản nhưng chỉ muốn được chắc chắn rằng điều này sẽ không gây ra bất kỳ vấn đề nào, vì nhiều ví dụ tôi đã gặp phải trên web có xu hướng ưu tiên sử dụng phương pháp tiếp cận cũ (tức là thiết lập các thuộc tính).

Answer 1

setAttribute nên được sử dụng trên DOM yếu tố và hạ tên thuộc tính trên các phần tử HTML. Bạn không thể sử dụng ký hiệu chấm để gán giá trị cho tên thuộc tính động.

Sử dụng setAttribute() để sửa đổi các thuộc tính nhất định, đáng chú ý nhất là giá trị trong XUL, hoạt động không nhất quán, vì thuộc tính chỉ định giá trị mặc định. Để truy cập hoặc sửa đổi các giá trị hiện tại, bạn nên sử dụng các thuộc tính. Ví dụ, sử dụng elt.value thay cho elt.setAttribute ('value', val).

Vì vậy, tóm lại, hãy sử dụng setAttribute nếu bạn có tên thuộc tính động. Nếu bạn có các thuộc tính bình thường, hãy sử dụng dot notation.

Answer 2

setAttribute sẽ thêm (tạo) thuộc tính nếu nó chưa tồn tại và đặt giá trị, trong khi các hàm bàn tay ngắn hoạt động nếu thuộc tính tương thích với đối tượng DOM. Tôi tin rằng không ai trong số họ là "tốt hơn" để sử dụng, chỉ có viết tắt cho các thuộc tính được sử dụng thường xuyên để thuận tiện.

Tôi nghĩ rằng nó hoàn toàn dựa trên tùy chọn của người dùng và tùy thuộc vào thuộc tính bạn muốn đặt.

Answer 3

Nó có thể là quan trọng cần lưu ý rằng khi sử dụng option.setAttribute('text', 'foo');, chứ không phải là thiết lập các innerHTML, nó sẽ thay tạo ra một văn bản bất động sản mới có tên (ví dụ <option text='foo'>).

Chức năng obj.setAttribute() rất hữu ích khi thiết lập thuộc tính không có giấy tờ, tuy nhiên trong trường hợp này nó sẽ là tốt nhất để sử dụng option.text = 'foo';