Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Добавить Child в заданное место
 
 автор: Eugene77   (29.01.2009 в 07:26)   письмо автору
 
 

У меня есть ссылка:
<a href="#" onclick="appendBefore(this)">Click me!</a>

При клике по этой ссылке перед ней должен появляться новый DIV с текстом.

Как такую функцию
 function appendBefore(address){
...
}

написать на JS?

  Ответить  
 
 автор: Eugene77   (30.01.2009 в 09:36)   письмо автору
 
   для: Eugene77   (29.01.2009 в 07:26)
 

Я не могу никак понять на какие свойства DOM можно расчитывать в решении этой задачи. У разных браузеров они ведь отличаются. Если бы знать на что можно с уверенностью опереться, я бы написал. Первое, что приходит на ум: в начале скопировать в переменную всё содержимое body, добавив при этом нужный элемент, а потом содержимое этой переменной вернуть в body
Что-то в таком роде:
var i, t, new_element;
function appendBefore(address){
  while(document.all[i++]){
    if(document.all[i++] != address)  t[] = document.all[i++];
    else {
         t[] = new_element;      
         t[] = document.all[i++];
     }
  }
document.body.innerHTML=t;
}

Но что-топодсказывает мне , что невсё так просто. Во-первых коллекция all ... она во всех браузерах будет работать? Во вторых, что такое innerHTML? Это ведь не массив?
Помогите, пожалуста, разобраться!

  Ответить  
 
 автор: coloboc66   (30.01.2009 в 09:52)   письмо автору
 
   для: Eugene77   (30.01.2009 в 09:36)
 

innerHTML - это свойство тега типа "строка", в ней могут быть любые теги и текст.
Так, по идее:

<html>
<head>
<script>
function appendBefore(a_id){ 
var elem = document.createElement("DIV");
elem.innerHTML='test';
document.body.insertBefore(elem, document.getElementById('a_id'));
}
</script>
</head>
<body>
<a id='a_1'  href='#' onclick=appendBefore(this.id) >Click me!</a>
</body>
</html>

  Ответить  
 
 автор: Eugene77   (30.01.2009 в 17:54)   письмо автору
 
   для: coloboc66   (30.01.2009 в 09:52)
 

Замечательно работает!
Спасибо!
Вставлят, правда, почему-то не перед, а после ссылки,но это уже мелочи

  Ответить  
 
 автор: coloboc66   (31.01.2009 в 22:05)   письмо автору
 
   для: Eugene77   (30.01.2009 в 17:54)
 

Честно говоря - сам не пойму, почему "после".Но разбираться - лень...

  Ответить  
 
 автор: mikha   (01.02.2009 в 04:47)   письмо автору
 
   для: Eugene77   (29.01.2009 в 07:26)
 

<script type="text/javascript"> 
function appendBefore(object){
    var elem = document.createElement("DIV"); 
    elem.innerHTML = 'test';
    elem.style.border='2px solid #0099FF';
    object.parentNode.insertBefore(elem, object);
}
</script>
<table width="300" border="1">
  <tr>
    <td><a href="#" onclick="appendBefore(this)">Click me!</a></td>
    <td><a href="#" onclick="appendBefore(this)">Click me!</a></td>
  </tr>
</table>

  Ответить  
 
 автор: Eugene77   (01.02.2009 в 18:33)   письмо автору
 
   для: mikha   (01.02.2009 в 04:47)
 

Да, точно.
Я уже теперь до этого и сам догадался.
Трудны, как всегда лишь первые шаги...
А потом, как всегда, нет проблем... просто заходишь в тупик : )

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования