| |
|
|
| | Здравствуйте
почемуто метод insertBefore не удаляет уже присутствующий узел, хотя везде написано, что должен :\
function a_node_copy(a_id) {
// выбор целевого элемента
var e = document.getElementById(a_id).cloneNode(true);
//alert(a_id);
// выбор принимающего элемента
var e_t = document.getElementById('bd03');
// вставка перед первым дочерним в принимающем элементе
e_t.insertBefore(e,e_t.firstChild);
}
|
функция присобачена к онклику
<div id = 'bd02'>
<div id = 'a4850' class = 'a_node' onclick = "a_node_copy(this.id)">
</div>
</div>
|
результат работы трех кликов:
<div id = 'bd03'>
<div id = 'a4850' class = 'a_node' onclick = "a_node_copy(this.id)">
</div>
<div id = 'a4850' class = 'a_node' onclick = "a_node_copy(this.id)">
</div>
<div id = 'a4850' class = 'a_node' onclick = "a_node_copy(this.id)">
</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: btr
(13.01.2013 в 18:44)
| | | коды ключница писала?
писать коды надо аккуратно, в определённом стиле - для HTML, в другом стиле - для JS
<div id="bd02">
<div id="a4850" class="a_node" onclick="a_node_copy (this.id)"></div>
</div>
<script>
var e = document.getElementById (a_id).cloneNode (true); // создание клона
var e_t = document.getElementById ('bd02'); // объект для метода; здесь у вас была путаница
e_t.insertBefore (e, e_t.firstChild); // приживление
</script>
|
в общем, никаких проблем, кроме того, что вы перепутали двойку с тройкой, я не вижу | |
| |
|
|
| |
|
|
| |
для: ЯСА
(14.01.2013 в 17:36)
| | | насчет аккуратно - это Вы по поводу разных кавычек? тут согласен, буду стараться.
1 двойку с тройкой не путал. есть два дива <div id="bd02"> и <div id="bd03"> не связанные друг с другом
2 див bd03 изначально пустой. в диве bd02 есть несколько элементов (узлов) с онкликом (в совсем упрощенном варианте - один)
3 по клику эти узлы переносятся (копируются) в див bd03 и вставляются первым потомком.
я думал, что insertBefore должен проверять на наличие среди этих потомков вставляемый узел, и если он есть, то переносить. однако этого не происходит. Просто вставляется еще один идентичный узел в начало.
что-то не так... либо лыжи не едут... но практика показывает, что это я что-то не так делаю, а вот ЧТО??? | |
| |
|
|
| |
|
|
| |
для: btr
(14.01.2013 в 18:40)
| | | размышления приводят к выводу: копирование узла cloneNode создает копию элемента, которая браузером рассматривается все же как новый элемент, поэтому с другой копией этого же элемента они различаются для insertBefore.
следовательно, не происходит перемещения. а жаль :) думал убить всех одной строчкой.
похоже, придется перед вставкой перебирать потомков принимающего узла с целью найти и удалить элемент с тем же ид.
правильно ли я понимаю?
вот так вот как-то
///////////////////////
function a_node_copy(a_id) {
// выбор целевого элемента
var e = document.getElementById(a_id).cloneNode(true);
//alert(a_id);
// выбор принимающего элемента
var e_t = document.getElementById('bd03');
e_t_ch = e_t.childNodes;
// перебираем и удаляем прежние копии
for (var i = 0; i < e_t_ch.length; i++) {
var el = e_t_ch[i];
if (el.id == a_id) {
e_t.removeChild(el);
}
}
// вставка перед первым дочерним в принимающем элементе
e_t.insertBefore(e,e_t.firstChild);
}
|
| |
| |
|
|
| |
|
|
| |
для: btr
(14.01.2013 в 20:51)
| | | > размышления приводят к выводу: копирование узла cloneNode создает копию элемента,
> которая браузером рассматривается все же как новый элемент, поэтому с другой копией
> этого же элемента они различаются для insertBefore.
А к выводу что для перемещения не нужно создавать копию вас размышления не приводят?
<html>
<head>
<style>div{border:solid black 1px;padding:1px;margin:1px}</style>
<script>
function a_node_copy(a_id){
var e = document.getElementById(a_id);
div_2.insertBefore(e,div_2.firstChild);
}
</script>
</head>
<body>
<div>Первый div
<div id=a4850 onclick="a_node_copy(this.id)">Переносимый div</div>
</div>
<div id=div_2>Второй div</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.01.2013 в 22:38)
| | | не было бы ничего проще, но нужно, чтобы исходный элемент остался в первом диве :)
следовательно, не происходит перемещения я имел ввиду в дереве потомков второго дива, просто путано объяснился :) | |
| |
|
|
| |
|
|
| |
для: btr
(14.01.2013 в 22:50)
| | | Ну и все-равно не нужен цикл.
<html>
<head>
<style>div{border:solid black 1px;padding:1px;margin:1px}</style>
<script>
function a_node_copy(a_id){
if((e=document.getElementById(a_id+'_copy'))==null){
var e = document.getElementById(a_id).cloneNode(true);
e.id=e.id+'_copy';
}
div_2.insertBefore(e,div_2.firstChild);
}
</script>
</head>
<body>
<div>Первый div
<div id=a1 onclick="a_node_copy(this.id)">Копируемый div 1</div>
<div id=a2 onclick="a_node_copy(this.id)">Копируемый div 2</div>
<div id=a3 onclick="a_node_copy(this.id)">Копируемый div 3</div>
</div>
<div id=div_2>Второй div</div>
</body>
</html>
|
или я опять не так понял? | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.01.2013 в 23:12)
| | | интересная мысль.
правда, мне не совсем подходит.
к тому же, я тут подумал, и пришел к выводу, что перебор мне отнюдь не помешает, я в нем попутно еще одну задачу решу.
единственное: насколько это корректно - иметь в документе два дива с одинаковыми ид? | |
| |
|
|
| |
|
|
| |
для: btr
(14.01.2013 в 23:22)
| | | вы можете иметь на странице хоть двести двадцать два тега с одинаковым значением id
однако метод getElementById (значение_id) всегда вернёт только первый найденный в DOM'e такой тег
прочие двести двадцать один тег этому методу недоступны
и зачем вам иметь 221 тег с "фишкой", которой нельзя воспользоваться?
именно поэтому значение id на странице должно быть уникальным
-----
кроме того, значение id должно быть валидным, т.е. состоять из латинских букв любого регистра, арабских цифр и символа подчёркивания, причём начинаться должно с буквы
потому что при назначении id тегу всякий браузер автоматически создаёт объект-ссылку на этот тег с тем же именем
запустите в любом браузере и убедитесь:
<span id="myUniqueID">Привет!</span>
<script>
alert (myUniqueID.innerHTML);
</script>
|
кое-кто упорно назначает id только из одних цифр
а любители JQuery очень любят id, содержащий символ дефиса
и у первых, и у вторых нет понимания, что, например, alert (123.innerHTML) и alert (my-id.innerHTML) не работает и, следовательно, структуру DOM они своими назначениями идентификаторов ломают | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.01.2013 в 01:47)
| | | хочется легко и просто через свойство элемент.id передавать код товара, поэтому и тянет сделать его чисто цифирным. вероятно, можно это как-то по другому сделать? не подскажете? | |
| |
|
|
| |
|
|
| |
для: btr
(15.01.2013 в 12:19)
| | | ну конечно, передать хер123 - это же так сложно, нам же надо код товара - именно 123
а от хер'а избавиться, прописав id.substr (3) - это вообще суперсложно, этого же в книжке не написано, да? | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.01.2013 в 12:24)
| | | да нет, написано, и несложно. но мало ли ;) | |
| |
|
|
| |
|
|
| |
для: btr
(14.01.2013 в 18:40)
| | | метод insertBefore () сам по себе ничего и никогда не проверяет
его предназначение - вставить виртуальный HTML-тег перед существующим HTML-тегом и вернуть ссылку на новый (ставший существующим) тег
------
метод insertBefore () "не волнует" - откуда именно взялся виртуальный тег: ему "по барабану" - создан "виртуал" клонированием существующего или создан вновь методом createElement ()
-------
по большому счёту объект, к которому применяется метод insertBefore () - он вовсе не нужен
вполне достаточным было бы указание только существующего HTML-тега, перед которым вставляется "виртуал"
однако всякий метод всегда работает на объекте, поэтому в данном случае исключительно формально "требуется" объект - и им всегда является родитель существующего HTML-тега, перед которым осуществляется "приживление"
т.е.
конструкция
ссылка_на_новый_тег = объект.insertBefore (ВИРТУАЛ_нового_тега, существующий_тег);
всегда может быть заменена на
ссылка_на_новый_тег = существующий_тег.parentNode.insertBefore (ВИРТУАЛ_нового_тега, существующий_тег);
|
------
в общем случае метод insertBefore () работает не только с тегами, но и вообще с нодами (коими могут быть текстовые ноды), но принцип работы с текстовыми нодами - тот же, что и с тегами | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.01.2013 в 01:32)
| | | какой я невнимательный: в книжке : если вставляемый узел уже присутствует в дереве документа, он удаляется из дерева и вставляется в новую позицию.
действительно, ни про какой объект-родитель не сказано...
спасибо за объяснение. | |
| |
|
|
| |
|
|
| |
для: btr
(13.01.2013 в 18:44)
| | | всем спасибо, все помогли :) | |
| |
|
|
