Вообще-то механика работы броузера с innerHTML довольно непроста. Настолько, что у w3c многие годы бродила идея вообще выкинуть innerHTML напрочь... Так что по возможности, следует избегать использование этого метода изменения страницы.
Вот еще пара мыслей.- в форме заводится специальное метка для вставки нового элемента. К примеру - span с именем 'placetoinsertnewelements'. Тогда вставка нового элемента в новое место превращается в операцию insertBefore.
- Вставляемые элементы, как правило, определенного типа и дизайна. Дизайн этот находится в html файле и правиться должен именно там, а не в Javascript'е. Так что правильнее, imho, создавать новые элементы клонируя уже существующие.
Для этого заводим специальное место в страничке, которое будет скрыто от просмотра и в нем разместим необходимые нам заготовки элементов.
| Код |
<form id="justaform"...>
<input ...>
<textarea ... >
<span id="placetoinsertnewelements"></span>
</form>
<!-- clone factory -->
<div style="display:none;">
<input id="input_template">
<textarea id="textarea_template"></textarea>
</div>
|
| Код |
function append_element(template, attr){
var element = document.getElementById(template).cloneNode(true);
element.removeAttribute('id');
if(attr && typeof(attr)=='object'){
for (var a in attr) {
element.setAttribute(a,attr[a])
}
}
return document.insertBefore(document.getElementById('placetoinsertnewelements'),element);
}
append_element('input_template',{name:'new_picture'});
|
|