Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Добавить html после элемента

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Как на javascript добавить html-код после определенного элемента
Uchkuma
Отправлено: 05 Сентября, 2010 - 18:16:59
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




Есть таблица:
CODE (html):
скопировать код в буфер обмена
  1. <table id="items">
  2. <tbody>
  3. <tr id="id_1"><td>abc</td><td>xyz</td></tr>
  4. <tr id="id_6"><td>abc</td><td>xyz</td></tr>
  5. <tr id="id_4"><td>abc</td><td>xyz</td></tr>
  6. <tr id="id_9"><td>abc</td><td>xyz</td></tr>
  7. </tbody>
  8. </table>

Есть переменная javascript:
CODE (javascript):
скопировать код в буфер обмена
  1. var text='<tr id="id_3"><td>abc</td><td>xyz</td></tr>';

Теперь как мне содержимое этой переменной вставить после второй строки, т.е. после элемента c id = id_6?

Вариант с document.createElement("tr"); document.createElement("td"); потом appendChild и с последующим наполнением ячеек данными не подходит.
Содержимое переменной может быть и несколькими строками. Столбцов на самом деле больше и строк в переменную может быть передано очень много, поэтому и хочется вставить это все как текст.

Помогайте, ребят! Моих знаний в javascript не хватает.
(Добавление)
Если интересно, то хочу сделать подгрузку некоторых строк в таблице через ajax.

(Отредактировано автором: 05 Сентября, 2010 - 18:48:12)

 
 Top
SAD
Отправлено: 05 Сентября, 2010 - 19:57:00
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)




На jquery
$(text).insertAfter('#'+id_6);
 
 Top
Uchkuma
Отправлено: 05 Сентября, 2010 - 20:13:02
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




А реализация без фреймворков?

Я полагаю, что можно вставить содержимое переменной в какой-нибудь скрытый div, из которого потом можно будет доставать его дочерние элементы и поочередно вставлять их в нужное место в таблице с помощью insertBefore().

Кто-нибудь может это изобразить на javascript?
 
 Top
SAD
Отправлено: 05 Сентября, 2010 - 20:24:25
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)




сначала нужно найти куда вставлять, потом то, потом это. Воспользуйтесь qjuery. Он еще пригодится)
 
 Top
JustUserR
Отправлено: 06 Сентября, 2010 - 17:48:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




Uchkuma пишет:
Я полагаю, что можно вставить содержимое переменной в какой-нибудь скрытый div, из которого потом можно будет доставать его дочерние элементы и поочередно вставлять их в нужное место в таблице с помощью insertBefore().
Реализация доступа к табличному элементу из DOM-модели в JS-скрипте имеет некоторые особенности связанные с возможность прямого редактирования ее содержимого - в частности во многих случаях изменение значения innerHTML для элемента таблицы и всех ее составляющих напрямую блокируется - причиной такого поведения является то что таблица в отличие от div-ов не может иметь произвольного внутрреннего наполнения и ее компоненты всегда контролирутся
Для реализации вашей задачи можно использовать различные схемы - самым оптимальным вариатом является разбор строки и покомпонентная вставка ее элементов в таблицу методами insertChild - в другом случае возможно разместить таблицу в div-элементе и при добавлении новых элементов проихводить перерасчет ее исходного HTML-кода Хотя данные методы логически эквиваленты но на практивке первый будет работать значительно быстрее - дело в том что обновления представления таблицы в нем будет осуществляться во внутреннем уровне исполнения и может быть оптимизировано в браузеров - в то время как во втором случае расчет производится средствами JS-скрипта и время на обрботку сгенерированного HTML-кода достаточно значительное


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
Uchkuma
Отправлено: 16 Сентября, 2010 - 14:02:37
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




JustUserR пишет:
самым оптимальным вариатом является разбор строки и покомпонентная вставка ее элементов в таблицу методами insertChild
Да, согласен. Только не в моем случае. Я тоже рассматривал этот вариант, но получится слишком громоздко, а мне надо идти в сторону упрощения.
JustUserR пишет:
в другом случае возможно разместить таблицу в div-элементе и при добавлении новых элементов проихводить перерасчет ее исходного HTML-кода
Вопрос в том и состоял, как внести изменения в исходный код таблицы. Точнее, как вставить строку с html-содержимимым после определенного элемента.
Uchkuma пишет:
Я полагаю, что можно вставить содержимое переменной в какой-нибудь скрытый div, из которого потом можно будет доставать его дочерние элементы и поочередно вставлять их в нужное место в таблице с помощью insertBefore().
В общем-то я сам себе ответил. Единственное, переменную, содержащую html-код, пришлось вставлять не в скрытый div, а в скрытую таблицу, т.к. строки <tr> не могут быть дочерними элементами div-а.
 
 Top
JustUserR
Отправлено: 16 Сентября, 2010 - 15:42:00
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




Uchkuma пишет:
Вопрос в том и состоял, как внести изменения в исходный код таблицы. Точнее, как вставить строку с html-содержимимым после определенного элемента.
Фактически объектный интерфейс который предоставляет различны возможноти обращения к таблице из JS-скрипта не разрешает использовать innerHTML-свойство для изменения ее отдельных компонентов - тем не менее для решения вашего вопроса без использвания скрытого элемента можно использовать outerHTML для всей таблицы с перерасчетом строки


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
garvey
Отправлено: 16 Сентября, 2010 - 16:09:42
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 528
Дата рег-ции: Май 2010  
Откуда: Minsk


Помог: 3 раз(а)




jQuery.
CODE (javascript):
скопировать код в буфер обмена
  1. $("#afterthis").after("<span>Inserting html</span>");
 
 Top
Uchkuma
Отправлено: 16 Сентября, 2010 - 16:52:11
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




Помешались вы все на jQuery Улыбка
 
 Top
garvey
Отправлено: 16 Сентября, 2010 - 19:31:13
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 528
Дата рег-ции: Май 2010  
Откуда: Minsk


Помог: 3 раз(а)




Не помешались. Я не люблю лшние библиотеки/плагины. Но ВСЕГДА для более-менее крупного проекта приходится использовать jQuery или другой фрэймворк. И раз уж мы подключили библиотеку, почему бы ей не воспользоваться? Поверьте, работает jQuery довольно быстро. И писать нативным JS не всегда есть хорошо.
 
 Top
JustUserR
Отправлено: 17 Сентября, 2010 - 13:43:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




garvey Для выполнения указанного вами выражения по автоматической вставки новых компонентов в документ - потребуется еще большее число ресурсов по сравнению в вторичной генерацией таблицы с учетом новых полей в ручном режиме


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
garvey
Отправлено: 17 Сентября, 2010 - 14:04:46
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 528
Дата рег-ции: Май 2010  
Откуда: Minsk


Помог: 3 раз(а)




JustUserR.Да. Но это для простых и тривиальных задач. Я к тому, что сложные вещи с DOM лучше делать на jQuery.
 
 Top
JustUserR
Отправлено: 17 Сентября, 2010 - 23:39:42
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




garvey пишет:
JustUserR.Да. Но это для простых и тривиальных задач. Я к тому, что сложные вещи с DOM лучше делать на jQuery.
Особенностью приведенного выше примера являлся тот факт что прямое использование DOM-модели для компонентного доступа к отдельным элементам таблицы представлялось невозможным - именно по этой причине рассматривались различные варианты с ручной перегенерацией исходного кода таблицы Интересно заметить что в Internet explorer 8 появилась возможность модифицировать DOM-объекты базовых элементов страницы - в частности возможно изменить само внутренне представление таблицы в пост-обработке


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB