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'
    }
});

Answer 2

我不知道原型，但我通常在jQuery中构建我的对象：

$("<p>").append(
  $("<img>")
  .attr("alt", "Sperator")
  .attr("src", "images/form-sep.gif")
).append(
  $("<img>")
  ... etc ...
)

Answer 3

您可以使用document.createElement()来创建DOM树中的每个元素 - 但这确实会更加笨拙（尽管可能更“正确”）。更不用说IE上的WAY慢了。我之前遇到过这个问题 - 对于IE来说，DOM操作非常迟缓。通过innerHTML分配一大堆元素的速度要快几个数量级。当然，如果你只创造了一些元素，你就不会感觉到它。但是对于一个10x300的桌子，它需要几秒钟（在我的旧Sempron 2200+ PC上超过10个）。

Answer 4

每当我通过JS进行复杂的元素创建时 - 我通常使用Prototypes插值方法。

要执行此操作，请在HTML中为要创建的元素创建一个模板，并将其放在页面底部，并使用display：none，以便隐藏它。然后使用Prototype的interpolate方法将特定字段替换为您的内容： http://www.prototypejs.org/api/string/interpolate并在html上调用show（）以使其可见。

Answer 5

我从不使用innerHTML。如果您尝试将字符串附加到innerHTML然后再引用DOM对象，则可能会在IE中遇到麻烦。在很多情况下我可以安全地使用innerHTML，但我认为没有理由。我首选的习惯是创建每个DOM对象，然后按如下方式附加文本：

var div = document.createElement('div');
div.appendChild(document.createTextNode('This is the inner text'));

但是，我使用了一些缩写，所以我的代码实际上看起来像这样：

var div = dec('div');
div.appendChild(dct('This is the inner text'));

我想缩写appendChild（）方法，因为这是一种常见的JavaScript方法，但如果你尝试通过创建.ac（）方法对DOM进行猴子修补，IE也会抱怨。

Answer 6

TBH，除非你使用的是预卷库（或者说OCDish足够自己编写），你可能最好使用innerHTML，只要IE＆lt; 8是一个重要因素（考虑到惯性）企业IT，将是很长一段时间）。在IE8之前的IE中（使用松散术语）DOM实现是如此错误，非标准和不完整，任何至少可用的完整代码都会被条件和特殊情况所困扰。

FWIW，我发现从数据表示中构建HTML是最清晰的，其代码可以尽可能地假设工作的DOM进行转换，并使用仅针对损坏的浏览器加载的代码完成IE的事后修复

以下是您的代码的样子：

horus.appendChild
  ('cartitems',
   [ 'div', '.cart_item',
     [ 'img', { src: json[i].picture, alt: 'Item preview', classname: 'icon' } ],
     [ 'p', null,
       json[i].id, [ 'br' ], json[i].qty,
       [ 'a', { href: 'javascript:clearProduct('+json[i].id+')' },
         [ 'img', { alt: 'Seperator', src: 'images/form-sep.gif' } ],
         [ 'img', { src: 'images/cross.png', title: 'Remove this item.' } ] ] ] ]);

horus.childText('cartcount', json.length);

我不会完全在这里发布我们的库，但请查看here （从第574行开始，肉在743）如果你很好奇，使用here中的IE修正代码。

innerHTML的替代品

6 个答案: