Вставка кода внутрь html-файла

@alexandre0sheva · Регистрация: 14.12.2010

Author24 — интернет-сервис помощи студентам

Есть сгенерированная страница html. И я с помошью javascript , а точнее ajax получаю некоторые участки кода. Как мне их вставить на страницу не затрагивая всю страницу?
document.write не подоходит, потому что изменяет всю страницу сразу.
alert тоже , так как мне надо не всплывающее окно, а просто вставить код
КАК мне этого добиться?

@GuardCat · 20.11.2011, 20:46

Кратко, так:

JavaScript
1
2
3
var div = document.createElement("div");
div.innerHTML = yourHTMLCodeFromAjax;
document.body.appendChild(div);

Если надо не просто к body, а к другому элементу добавить, то, например так:

JavaScript
1
document.getElementById("myBlock").appendChild(div);

Оформите функцией и используйте.

@alexandre0sheva · 20.11.2011, 21:05 **[ТС]**

Вы не поняли. Я получил через ajax блок div. Как мне его вставить после элемента с id="todo"?

@Vicont · 20.11.2011, 23:53

JavaScript
1
2
3
4
5
6
7
8
9
10
//Вставка нового элемента перед элементом с id='todo'
target = document.getElementById('todo');
target.parentNode.insertBefore(new_elem,target);
 
//Вставка нового элемента после элемента с id='todo'
target = document.getElementById('todo');
if (target.nextSibling)
  target.parentNode.insertBefore(new_elem,target);
else
  target.parentNode.appendChild(new_elem);

Добавлено через 11 минут
Опечатался, вместо:

JavaScript
1
2
if (target.nextSibling)
  target.parentNode.insertBefore(new_elem,target);

Нужно:

JavaScript
1
2
if (target.nextSibling)
  target.parentNode.insertBefore(new_elem,target.nextSibling);

@alexandre0sheva · 20.11.2011, 23:56 **[ТС]**

Vicont, почему-то ничего не происходит, код получен, но не выведен...

@Vicont · 20.11.2011, 23:59

Ну я не знаю как у Вас код получается и как вы его выводите. Код в студию!
Лучше сделать так:

JavaScript
1
2
3
4
5
6
7
8
new_elem = document.createElement('div');
new_elem.innerHTML = //ваш полученный код HTML
//Вставка нового элемента после элемента с id='todo'
target = document.getElementById('todo');
if (target.nextSibling)
  target.parentNode.insertBefore(new_elem,target.nextSibling);
else
  target.parentNode.appendChild(new_elem);

@alexandre0sheva · 21.11.2011, 00:01 **[ТС]**

Вот код javascript:

JavaScript
1
2
3
4
5
6
7
8
9
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
     target = document.getElementById('todo');
     if (target.nextSibling)
      target.parentNode.insertBefore(datamess,target);
     else
      target.parentNode.appendChild(datamess);
      }
    })

Через плагин мозилы firebug я вижу, что в переменной datamess содержится такой код:

HTML5
1
2
3
4
5
6
7
8
9
<div id="window">
    <div id="windowTop">
        <img src="https://www.cyberforum.ru/images/window_min.jpg" id="windowMin" />
        <img src="https://www.cyberforum.ru/images/window_max.jpg" id="windowMax" />
        <img src="https://www.cyberforum.ru/images/window_close.jpg" id="windowClose" />
    </div>
    <div id="windowBottom"><div id="windowBottomContent">&nbsp;</div></div>
    <img src="https://www.cyberforum.ru/images/window_resize.gif" id="windowResize" />
</div>

Но на странице он в нужном месте не вставляется...

@Vicont · 21.11.2011, 00:05

Как я выше указал, Вам нужно сделать так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         new_elem = document.createElement('div');
         new_elem.innerHTML = datamess;
         target = document.getElementById('todo');
         if (target.nextSibling)
               target.parentNode.insertBefore(datamess,target.nextSibling);
          else
               target.parentNode.appendChild(datamess);
      }
    })

@alexandre0sheva · 21.11.2011, 00:08 **[ТС]**

Vicont, изменил, но на странице изменений нет. по прежнему не выводит

@Vicont · 21.11.2011, 00:11

Недосмотрел Ваш код) Вот так нужно:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         var new_elem = document.createElement('div');
         new_elem.innerHTML = datamess;
         target = document.getElementById('todo');
         if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem);
      }
    })

@alexandre0sheva · 21.11.2011, 00:16 **[ТС]**

Vicont, а изменений нет и нет(
я уже начинаю искать ошибки в таких мелочах, где они не будут:
например, элемент с id="todo" - это пустой div... так вроде можно... в чем же может еще быть ошибка?

@Vicont · 21.11.2011, 00:21

Предлагаю сделать такой тест:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         //var new_elem = document.createElement('div');
         //new_elem.innerHTML = datamess;
         target = document.getElementById('todo');
         target.innerHTML = 'TEST';
        /*if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem); */
      }
    })

Это даст нам понять, работает ли код.

@alexandre0sheva · 21.11.2011, 00:24 **[ТС]**

Vicont, это работает. вывелось слово "TEST"

@Vicont · 21.11.2011, 00:26

Отлично! Теперь сделайте так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         var new_elem = document.createElement('div');
         new_elem.innerHTML = 'Test 2';
         target = document.getElementById('todo');
        if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem);
      }
    })

Работает?

@alexandre0sheva · 21.11.2011, 00:28 **[ТС]**

спасибо, тоже работает)
а что далее?

@Vicont · 21.11.2011, 00:32

А дальше как я и предполагал, проблемы в Вашем коде который приходит - datamess
Сделайте еще пару действий чтобы уж точно убедиться:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         var new_elem = document.createElement('div');
         new_elem.innerHTML = '<span style="color: red">Этот текст должен быть красного цвета</span>';
         target = document.getElementById('todo');
        if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem);
      }
    })

Это во-первых, во-вторых сделайте так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
          alert(typeof datamess) // должно быть выведено String
          alert(datamess) //Что тут вывелось?
         /*
         var new_elem = document.createElement('div');
         new_elem.innerHTML = 'Test 2';
         target = document.getElementById('todo');
          if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem);*/
      }
    })

@alexandre0sheva · 21.11.2011, 00:38 **[ТС]**

Vicont, Вы правы. проблема в коде, так как я изменил на:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         var new_elem = document.createElement('div');
         new_elem.innerHTML = '<div id="window"><div id="windowTop"><div id="windowTopContent">aaa</div><img src="https://www.cyberforum.ru/images/window_min.jpg" id="windowMin" />    <img src="https://www.cyberforum.ru/images/window_max.jpg" id="windowMax" />    <img src="https://www.cyberforum.ru/images/window_close.jpg" id="windowClose" /></div><div id="windowBottom"><div id="windowBottomContent">&nbsp;</div></div>   <div id="windowContent">опа</div><img src="https://www.cyberforum.ru/images/window_resize.gif" id="windowResize" /></div>';
         target = document.getElementById('todo');
        if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem);
      }
    })

(там код, который получаю через ajax) и ничего не вывелось...
если сделать так:

JavaScript
1
2
alert(typeof datamess) // должно быть выведено String
          alert(datamess) //Что тут вывелось?

то в первом всплывающем окне вывелось "string", а во втором - код с тегами

Добавлено через 1 минуту
но тогда чем ему не нравится этот код:

HTML5
1
2
3
4
5
6
7
8
9
<div id="window">
    <div id="windowTop">
        <img src="https://www.cyberforum.ru/images/window_min.jpg" id="windowMin" />
        <img src="https://www.cyberforum.ru/images/window_max.jpg" id="windowMax" />
        <img src="https://www.cyberforum.ru/images/window_close.jpg" id="windowClose" />
    </div>
    <div id="windowBottom"><div id="windowBottomContent">&nbsp;</div></div>
    <img src="https://www.cyberforum.ru/images/window_resize.gif" id="windowResize" />
</div>

???

@Vicont · 21.11.2011, 00:54

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$.post("timer_mess.php",{timer: timer}, function(datamess){
     if(datamess) {
         var new_elem = document.createElement('div');
         new_elem.innerHTML = '<div id="window"><div id="windowTop"><div id="windowTopContent">aaa</div><img src="https://www.cyberforum.ru/images/window_min.jpg" id="windowMin" />      <img src="https://www.cyberforum.ru/images/window_max.jpg" id="windowMax" />      <img src="https://www.cyberforum.ru/images/window_close.jpg" id="windowClose" /></div><div id="windowBottom"><div id="windowBottomContent">&nbsp;</div></div>     <div id="windowContent">опа</div><img src="https://www.cyberforum.ru/images/window_resize.gif" id="windowResize" /></div>';
         target = document.getElementById('todo');
        if (target.nextSibling)
               target.parentNode.insertBefore(new_elem,target.nextSibling);
          else
               target.parentNode.appendChild(new_elem);
      }
    })

Как это ни странно, но я этот код проверил и все выводится...

P.S. Может все-таки этот код работает? именно этот?

Новые блоги и статьи Все статьи Все блоги /
Образование и практика Igor3D 21.03.2025 Добрый день А вот каково качество/ эффективность ВУЗовского образования? Аналитическая геометрия изучается в первом семестре и считается довольно легким курсом, что вполне справедливо. Ну хорошо,. . .	Lazarus. Таблица с объединением ячеек. Massaraksh7 21.03.2025 Понадобилась представление на экране таблицы с объединёнными ячейками. И не одной, а штук триста, и все разные. На Delphi я использовал для этих целей TStringGrid, и то, кривовато получалось. А в. . .	Async/await в Swift: Асинхронное программирование в iOS mobDevWorks 20.03.2025 Асинхронное программирование долго было одной из самых сложных задач для разработчиков iOS. В течение многих лет мы сражались с замыканиями, диспетчеризацией очередей и обратными вызовами, чтобы. . .	Колмогоровская сложность: Приёмы упрощения кода ArchitectMsa 20.03.2025 Наверное, каждый программист хотя бы раз сталкивался с кодом, который напоминает запутанный лабиринт — чем дальше в него погружаешься, тем сложнее найти выход. И когда мы говорим о сложности кода, мы. . .	PostgreSQL в Kubernetes: Подготовка кластера и настройка Mr. Docker 20.03.2025 Когда доходит до контейнеризации баз данных и особенно таких требовательных к ресурсам системах как PostgreSQL, многие команды до сих пор колеблются, прежде чем перенести их в контейнерную. . .
C++26: Индексирование пакетов и метапрограммирование bytestream 20.03.2025 Эволюция C++ продолжается стремительными темпами – каждый новый стандарт приносит функциональность, о которой мы мечтали годами. Звучит слишком громко? Если вы когда-либо боролись с вариадическими. . .	Состояние гонки в C#: подводные камни многопоточного программирования UnmanagedCoder 20.03.2025 Что такое состояние гонки? Это ситуация, когда результат программы непредсказуемо меняется в зависимости от порядка выполнения потоков. Проще говоря, два или более потока пытаются одновременно. . .	Next.js для разработки React: преимущества серверного рендеринга Reangularity 20.03.2025 Next. js решает классическую проблему React-приложений: медленную первоначальную загрузку и плохую индексацию поисковиками. Вместо того чтобы заставлять браузер пользователя выполнять всю работу по. . .	JUnit или TestNG: Выбираем Java-фреймворк для тестирования Javaican 20.03.2025 История тестовых фреймворков в Java началась в конце 90-х, когда Кент Бек и Эрих Гамма разработали JUnit - инструмент, который перевернул представление разработчиков о модульном тестировании. JUnit. . .	Разбиваем монолит на два микросервиса и реализуем CI/CD ArchitectMsa 20.03.2025 Когда команда растет, а функциональность монолита расширяется, поддерживать и развивать такую систему становится все труднее. Разработчики начинают тратить много времени на разбор сложных. . .

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106

	Вставка кода внутрь html-файла 20.11.2011, 20:12. Показов 5932. Ответов 17 Метки нет (Все метки) Есть сгенерированная страница html. И я с помошью javascript , а точнее ajax получаю некоторые участки кода. Как мне их вставить на страницу не затрагивая всю страницу? document.write не подоходит, потому что изменяет всю страницу сразу. alert тоже , так как мне надо не всплывающее окно, а просто вставить код КАК мне этого добиться? 0

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106
	20.11.2011, 21:05 [ТС]
	Вы не поняли. Я получил через ajax блок div. Как мне его вставить после элемента с id="todo"? 0

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106
	20.11.2011, 23:56 [ТС]
	Vicont, почему-то ничего не происходит, код получен, но не выведен... 0

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106
	21.11.2011, 00:08 [ТС]
	Vicont, изменил, но на странице изменений нет. по прежнему не выводит 0

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106
	21.11.2011, 00:16 [ТС]
	Vicont, а изменений нет и нет( я уже начинаю искать ошибки в таких мелочах, где они не будут: например, элемент с id="todo" - это пустой div... так вроде можно... в чем же может еще быть ошибка? 0

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106
	21.11.2011, 00:24 [ТС]
	Vicont, это работает. вывелось слово "TEST" 0

@alexandre0sheva 3 / 3 / 0 Регистрация: 14.12.2010 Сообщений: 106
	21.11.2011, 00:28 [ТС]
	спасибо, тоже работает) а что далее? 0