JavaScript: лучше использовать innerHTML, или (много из) createElement звонит для добавления сложной структуры отделения? [дубликат]
Я всегда сохраняю их в файле Constants.h:
#define IS_IPHONE5 (([[UIScreen mainScreen] bounds].size.height-568)?NO:YES)
#define IS_OS_5_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 5.0)
#define IS_OS_6_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6.0)
#define IS_OS_7_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)
#define IS_OS_8_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0)
8 ответов
Как я знаю, самый быстрый способ - это уклониться от редактирования DOM как можно дольше. Это означает, что лучше создать большую строку, а затем поместить ее в innerHTML. Но есть замечание: не выполняйте слишком много операций над большими строками, быстрее использовать массив строк, а затем объединить их все.
Так как вы упомянули шаблон и клон, вас может заинтересовать этот вопрос:
Другой вариант заключается в использовании DOM-оболочки, такой как DOMBuilder :
DOMBuilder.apply(window);
DIV({"class": "class0 class1 class3"},
DIV({"class": "spacer"}),
DIV({id: "content"}, "content"),
DIV({"class": "spacer"}),
DIV({id: "content2"}, "content2"),
DIV({"class": "class4"}, "content3"),
DIV({"class": "spacer"}),
DIV({id: "footer"}, "content3")
);
Лично, если для каждого элемента потребуется точная такая же структура, созданная I пошел бы с подходом клонирования. Если есть какая-то логика, связанная с созданием структуры, в которую будет входить контент, я бы предпочел сохранить что-то подобное выше, чем возиться со строками. Если бы этот подход оказался слишком медленным, я бы вернулся к innerHTML.
1) Создайте все элементы как innerHTML с конкатенацией строк для добавления содержимого.
2) Используйте createElement, setAttribute и appendChild для создания и добавления каждого div.
3) компромисс. Создайте все элементы за один раз как innerHTML (что позволяет избежать большой медлительности манипуляции со списком дочерних узлов), затем запишите содержимое, которое изменяется для каждого элемента, используя доступ к данным / атрибутам (избегая всего этого отвратительного мошенничества с необходимостью избегать HTML-содержимого). например. что-то вроде:
var html= (
'<div class="item">'+
'<div class="title">x</div>'+
'<div class="description">x</div>'+
'</div>'
);
var items= [
{'id': 1, 'title': 'Potato', 'description': 'A potato'},
{'id': 2, 'title': 'Kartoffel', 'description': 'German potato'},
// ... 100 other items ...
];
function multiplyString(s, n) {
return new Array(n+1).join(s);
}
var parent= document.getElementById('itemcontainer');
parent.innerHTML= multiplyString(html, items.length);
for (var i= 0; i<items.length; i++) {
var item= items[i];
var node= parent.childNodes[i];
node.id= 'item'+item.id;
node.childNodes[0].firstChild.data= item.title;
node.childNodes[1].firstChild.data= item.description;
}
Может также сочетаться с советами Нейла о DocumentFragments.
Ни того, ни другого. Используйте такие библиотеки, как jQuery, Prototype, Dojo или mooTools, потому что оба эти метода сопряжены с проблемами:
- Знаете ли вы, что innerHTML в таблицах для IE доступен только для чтения?
- Знаете ли вы, что для элемента select он также нарушен ?
- Как насчет проблем с createElement?
Авторы основных библиотек javascript потратили много времени и имеют целые системы отслеживания ошибок, чтобы убедиться, что при вызове их инструментов изменения DOM они действительно работают.
Если вы
altCognito делает хорошее замечание - использование библиотеки - это путь. Но если бы делал это вручную, я бы использовал вариант № 2 - создавать элементы с помощью методов DOM. Они немного уродливы, но вы можете сделать функцию фабрики элементов, которая скрывает уродство. Конкатенация строк HTML также ужасна, но, скорее всего, у нее будут проблемы с безопасностью, особенно с XSS.
Хотя я определенно не буду добавлять новые узлы по отдельности. Я бы использовал DOM DocumentFragment. Присоединение узлов к documentFragment происходит намного быстрее, чем вставка их в действующую страницу. Когда вы закончите сборку фрагмента, он просто вставляется сразу.
Джон Резиг объясняет это гораздо лучше, чем я мог , но в основном вы просто говорите:
var frag = document.createDocumentFragment();
frag.appendChild(myFirstNewElement);
frag.appendChild(mySecondNewElement);
...etc.
document.getElementById('insert_here').appendChild(frag);
Лично я использую innerHTML, потому что это то, к чему я привык, и для чего-то подобного методы W3C добавляют много беспорядка в код.
Просто возможный способ сократить Однако, если не учитывать количество элементов div, есть ли причины, по которым вы используете элементы распорки вместо простого редактирования полей содержимого div?
Я не думаю, что между ними есть что выбрать. В прежние времена (IE6, FF1.5) innerHTML был быстрее (тест ), но теперь, похоже, заметного различия в большинстве случаев нет.
Согласно Mozilla Dev. docs есть несколько ситуаций, когда поведение innerHTML варьируется между браузерами (особенно внутри таблиц), поэтому createElement даст вам большую согласованность - но innerHTML обычно меньше набирает.
Для такой сложной проблемы, как эта, я обычно использую методы innerHTML, потому что они а) проще для чтения и изменения кода, б) более удобны для использования в циклах. Как говорится в главном сообщении, они, к сожалению, не работают в IE (6,7,8) на <таблица> , , , , , , элементов.
Похожие вопросы: