JavaScript - tạo phần tử và đặt thuộc tính

Question

Tôi có các chức năng này để tạo các phần tử và thay đổi các thuộc tính của chúng. Bạn có thể cho tôi lời khuyên về cách sửa đổi chúng không?

function create(elem) { 
return document.createElementNS ? document.createElementNS("http://www.w3.org/1999/ xhtml", elem) : document.createElement(elem); 
} 

function attr(elem, name, value) { 
if (!name || name.constructor != String) return ""; 
name = {"for": "htmlFor", "class": "className"}[name] || name; 
if (typeof value != "undefined") { 
    elem[name] = value; 
    if (elem.setAttribute) elem.setAttribute(name, value); 
} 
return elem[name] || elem.getAttribute(name) || ""; 
} 

Tôi muốn để có được một cái gì đó giống như này tạo ('div', { 'id': 'test', 'lớp': 'smth'});

function create(elem, attr) { 
if (!attr) return document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", elem) : document.createElement(elem); 
if (attr) { 
    var el = document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", elem) : document.createElement(elem); 
    for (var i = 0; i < attr.length; i++) { 
    attr(el, name[i], value[i]); 
    } 
    return el; 
} 

}

Xin giúp =]

Answer 1

Tôi muốn giới thiệu một khuôn khổ javascript như jQuery. Họ đã thực hiện chức năng này.

$("<div/>", { 
    "class": "test", 
    text: "Click me!", 
    click: function(){ 
     $(this).toggleClass("test"); 
    } 
}).appendTo("body"); 

Answer 2

Bạn không thể lặp thông qua một đối tượng như thế:

for (var k in attrs) { 
    if (attr.hasOwnProperty(k)) 
    attr(el, k, attrs[k]); 
} 

Lưu ý rằng tôi đã thay đổi "attr" của bạn biến thành "attrs" để nó không che giấu sự "attr" chức năng bạn đã tạo. Ngoài ra, trong hàm "attr" của bạn, hãy thay đổi thử nghiệm "chưa xác định":

if (typeof value !== undefined) 

để an toàn hơn một chút. So sánh với "==" và "! =" Thử chuyển đổi loại, điều này không cần thiết nếu bạn chỉ kiểm tra undefined.

Answer 3

Lời khuyên: Cá nhân tôi thích cách jquery bởi vì bạn có thể thêm css và sự kiện trực tiếp vào phần tử và tham chiếu đến đối tượng bằng tên var thay vì id, nhưng ... Có vấn đề khi sử dụng phương pháp này để tạo ra các yếu tố đầu vào, tức là 7 & ie8 không cho phép bạn đặt thuộc tính kiểu nên hãy cẩn thận khi tạo nút, hộp văn bản, v.v., jquery sẽ ném một lỗi "loại thuộc tính không thể thay đổi".

Nếu mã sẽ được sử dụng trong trình duyệt trước khi ie9, hãy sử dụng tốt nhất: document.createElement để tăng tính tương thích.