Непойму в чем разница в коде
В IE так вот работает:
var a = NN.childNodes; var l = a.length; for (var i = 0; i < l; i++) insobj.appendChild(a[0]); А вот так не работает: var a = NN.childNodes; var l = a.length; for (var i = 0; i < l; i++) insobj.appendChild(NN.childNodes[0]); Всем остальным браузерам фиолетово как написано. В чем тут грабля расскажите пожалуйста. |
Лично я когда добавляю что-то в структуру документа
сначала этот элемент создаю методами document.createElement или узел.cloneNode(глубина) и др. Вы же в appendChild помещаете ссылку на уже находящийся в структуре DOM элемент и оставляете все проблемы решать браузеру. И у браузеров на такой случай наверное разные методы решения и если понимают по разному - то тут ничего странного. |
Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed. (http://www.w3.org/TR/1998/REC-DOM-Le...ml#ID-184E7107)
в общем в стандарте этот пункт предусмотрен NT Man, что значит не работает? Ошибки возникают? |
Цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var from = document.createElement('p');
from.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
while (to.firstChild) to.removeChild(to.firstChild);
// Рабочий пример.
var a = from.firstChild.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
// Не рабочий пример только для IE
// var a = from.firstChild; var l = a.childNodes.length;
// for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>
|
Почему не так?
while (from.firstChild) to.appendChild(from.firstChild) |
Цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var temp = document.createElement('p');
temp.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
from = temp.firstChild;
while (to.firstChild) to.removeChild(to.firstChild);
// Рабочий пример.
var a = from.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
// Не рабочий пример только для IE
// var a = from; var l = a.childNodes.length;
// for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
// Еще один не рабочий пример только для IE
// while (from.firstChild) to.appendChild(from.firstChild);
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>
|
Цитата:
|
Цитата:
|
приведу свой вариант
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var div = document.createElement('div');
div.innerHTML = '<select><option selected>1 selected</option><option>2</option></select>';
var opt1 = document.createElement('option'),
opt2 = document.createElement('option'),
select = document.createElement('select');
opt1.innerHTML = '1 selected';
opt1.selected = true;
opt2.innerHTML = '2';
select.appendChild( opt1 );
select.appendChild( opt2 );
var children = div.firstChild.childNodes;
while( children.length )
{ alert( children[0].innerHTML+', '+
children[0].selected );
to.appendChild( children[0] );
}
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>
если обращаться к option через children, то текущим становится выбранный пункт. Если же через div.firstChild.childNodes - последний. Можно даже добавить больше пунктов, чтобы проверить. Но не забываем что при appendChild option'ы удаляются из исходного select'а, значит один из вариантов поведения: в исходном select должен меняться текущий option (при удалении текущего). Но ie идет дальше (либо так изначально задумывалось, либо они пофиксили свое поведение), если мы обращаемся к appendChild через ссылку на childNodes, значит мы обходим всех детей select (менять текущий пункт не надо), если же через childNodes - значит мы хотим просто извлечь отдельный пункт p.s. зацените теорию ;) |
Да, заценил ;) Правда, мне снятие selected представляется вполне логичным. FF 3.0.14 -- Во всех вариантах Крыса Лариса; Опера 9.64 -- во всех вариантах Крокодил Гена, ИЕ8 -- 1й Крокодил, дальше Крыса. Имеет ли смысл рассчитывать на что-то в таком случае?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег SELECT</title>
<script type="text/javascript">
function ggg(k) {
var to = document.getElementById("bbb");
var temp = document.createElement('p');
temp.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
from = temp.firstChild;
while (to.firstChild) to.removeChild(to.firstChild);
switch (k) {
case 1:
// Рабочий пример.
var a = from.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
break;
case 2:
// Не рабочий пример только для IE
var a = from; var l = a.childNodes.length;
for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
break;
case 3:
// Еще один не рабочий пример только для IE
while (from.firstChild) to.appendChild(from.firstChild);
break;
}
}
</script>
</head>
<body>
<form action="/" method="post">
<p><select id="bbb" name="hero"></select></p>
<input type="button" value="ins select v1" onclick="ggg(1)" />
<input type="button" value="ins select v2" onclick="ggg(2)" />
<input type="button" value="ins select v3" onclick="ggg(3)" />
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:36. |