javascript - innerHTML 的替代品

Question

我觉得我在用我的代码滥用 DOM...

for(var i=0; i<json.length; ++i){       
    var newobj = document.createElement("div");
    var inner = "<img src='"+json[i].picture+"' alt='Item preview' class='icon' />";

    inner += "<p>"+json[i].id+"<br />qty:"+json[i].qty;
    inner += "<a href=\"javascript:clearProduct('"+json[i].id+"')\">";
    inner += "<img alt='Seperator' src='images/form-sep.gif' />";
    inner += "<img src='images/cross.png' alt='Remove this item.' title='Remove this item.' />";
    inner += "</a></p>";
    newobj.innerHTML = inner;
    newobj.className = "cart_item";
    $('cartitems').appendChild(newobj);
    $('cartcount').innerHTML = json.length;
}

有更好的方法吗？我的意思是，是的，我可以通过并为每个元素使用 createElement 并分别设置每个属性，但就在如此简单的情况下，这似乎很多。有没有更好的办法？

Answer 1

我喜欢创建一个漂亮的元素创建界面；像这样:

function el( name, attrs ) {

    var elem = document.createElement(name),
        styles = attrs.style;

    for (var prop in styles) {
        try {
            elem.style[prop] = styles[prop];
        } catch(e) {}
    }

    for (var attr in attrs) {
        if (attr === 'style') { continue; }
        elem[attr] = attrs[attr];
    }

    return elem;

}


var myImage = el('img', {
    src: '/path/to/image.jpg',
    alt: 'Really cool image',
    style: {
        border: '1px solid red',
        padding: '10px'
    }
});