Альтернатива 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'
    }
});

Answer 2

Вы можете использовать document.createElement() для создания каждого элемента в вашем DOM-дереве - но это действительно будет гораздо более неуклюжим (хотя, возможно, более "правильным"). Не говоря уже о ПУТИ медленнее в IE. Я сталкивался с этой проблемой раньше - операции DOM крайне медлительны для IE. Назначение целой связки элементов через innerHTML на несколько порядков быстрее. Конечно, вы не почувствуете этого, если создадите всего несколько элементов. Но для стола 10x300 это займет несколько секунд (более 10 на моем старом ПК Sempron 2200+).

Answer 3

Я не знаю прототип, но я обычно строю свои объекты в jQuery так:

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

Answer 4

Всякий раз, когда я делаю сложное создание элемента с помощью JS, я обычно использую метод интерполяции прототипов.

Чтобы сделать это, создайте шаблон в HTML для элемента, который вы хотите создать, и поместите его внизу страницы с отображением: ни один, поэтому он скрыт. Затем используйте метод интерполяции Prototype, чтобы заменить определенные поля вашим содержимым: http://www.prototypejs.org/api/string/interpolate и вызовите show () в html, чтобы сделать его видимым.

Answer 5

TBH, если вы не используете предварительно свернутую библиотеку (или если OCDish достаточно для написания своей собственной), вам, вероятно, лучше всего использовать innerHTML до тех пор, пока IE <8 является существенным фактором (что, учитывая инерцию) корпоративного IT, будет долго). Реализация DOM (использующая термин «свободно») в IE до IE8 настолько глючна, нестандартна и неполна, что любой, по крайней мере пригодный для использования полный код, будет завален условными и частными случаями. </p>

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

Я не собираюсь публиковать здесь наши библиотеки целиком, но загляните в здесь (начиная с строки 574, с мясом на 743), если вам интересно, с кодом исправления IE в здесь .

Answer 6

Я никогда не использую 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, но IE также жалуется, если вы попытаетесь обезопасить DOM, создав метод .ac ().