HTML DOM как с использованием Javascript создать узлы DOM

@faringor · Регистрация: 03.08.2011

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

Доброго времени суток. хочу через Javascript по событию onclick добавить в html документ что то вроде:

HTML5
1
<div>hello world</div>

, но не получается. Если написать код так, то не работает:

JavaScript
1
a.innerHTML+="<div>hello world</div>";

а если так, то работает:

JavaScript
1
a.innerHTML+="hello world";

вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
c=document.createElement('div');
function addob()
{
var a=document.createElement('div');
a.innerHTML+="hello world";
b=a.firstChild.data;
c.innerHTML+=b;
}
</script>

Добавлено через 21 минуту
может попробовать метод appendChild(), но думаю врядле поможет. Основная цель это вывести значение переменной в корректном виде, вместо этого выходит undefined

Добавлено через 29 минут
код не тот, вот более актуальный, но суть проблемы от этого не меняется

JavaScript
1
2
3
4
5
6
7
8
9
10
dk=document.getElementById('dk');
function addob()
{
a=document.createElement('div');
a.id='fdiv';
a.className='fdiv';
a.innerHTML='<div>hello world</div>';
b=a.firstChild.data
dk.innerHTML+=b;
}

@borovik · 03.08.2011, 13:41

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
   window.onload = function(){
       var mydiv = getElementById("mydiv");
       mydiv.onclick = function(){
            var myElement = document.createElement('<div style="width:600; height:200;background-color:blue;">OLOLO</div>');
            mydiv.appendChild(myElement)
       }
   }
</script>

HTML5
1
<div id="mydiv">hello world</div>

---------------
кстати у меня

a.innerHTML+="<div>hello world</div>";
работает

@faringor · 03.08.2011, 13:47 **[ТС]**

может быть я непонятно написал, но я хочу дабавлять данную конструкцию уже после загрузки страницы по щелчку на пнопке, P.S извиняюсь кода не увидел сначала, данное сообщение не читать)))

@borovik · 03.08.2011, 13:48

faringor, мб я непонятно написал - но это так и есть, только по щелчку по диву, в первом посте я невижу никаких кнопок

@faringor · 03.08.2011, 22:22 **[ТС]**

Сообщение от borovik

faringor, мб я непонятно написал - но это так и есть, только по щелчку по диву, в первом посте я невижу никаких кнопок

это у меня видимо неполадки) кода не увидел сначала, видимо не дождался полной загрузки страницы, сейчас все опробую)

Добавлено через 8 часов 24 минуты
К сожалению я так и не добился того чего ожидал, возможно я как то ни так запускаю предложенный мне код. Ниже представлен файл index.html и я не понимаю как там может работать( a.innerHTML+="<div>hello world</div>"; ) так как у меня ну уж никак не работает а выдает undefined. Может поможете довести до ума мой код, буду очень признателен, код представлен ниже.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head profile="http://gmpg.org/xfn/11">
<TITLE>Пример: Простой спойлер на JavaScript</TITLE>
<META HTTP-EQUIV=Content-Type CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="spoiler.css"/>
</head>
<body>
<div id="xdiv">
<div id="htc">
<p><a href="javascript://" onclick="addob()">добавить</a></p>
    </div>
</div>
<div id="dk"/>
<script type="text/javascript">
<!--
dk=document.getElementById('dk');
function addob()
{
a=document.createElement('div');
a.id='fdiv';
a.className='fdiv';
a.innerHTML='<b>hello world</b>';
b=a.firstChild.data
dk.innerHTML+=b;
}
    //-->
</script>
</body>
</html>

Добавлено через 4 минуты
Тот же самый код при значении переменной a.innerHTML='hello world'; без тегов html ошибок не выдает. Если есть другое решение пожалуйста подскажите. предложенный боровиком вариант я заставить работать так и не смог =(

@borovik · 03.08.2011, 22:41

вот рабочий код
я понял так: тыкаешь на слово добавить и в диве dk создается твой див

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
 
        <div id="htc" style="background-color: aqua">
        <p><a href="javascript://" onclick="addob()">добавить</a></p>
        </div>
 
<div id="dk" style="background-color: gold; padding: 20px"></div>
 
 
<script type="text/javascript">
 
var dk=document.getElementById('dk');
function addob()
{
    dk.innerHTML = "<div style='color:red; background-color: blue'>ЭТО ноВЫЙ ДИВ Я ДАБАВИЛ</div>";
}
</script>
 
</body>

HTML DOM как с использованием Javascript создать узлы DOM

@faringor · 04.08.2011, 09:02 **[ТС]**

Больщое спасибо боровик за помощь, предложенный тобой вариант намного проще и понятней, думаю на этом решении я и остановлюсь. Я использовал такое решение ранее но мне пришлось отказаться от него только потому, что вместо слоя с надписью, мне необходимо было каждый раз вставлять в документ более сложные структуры кода и чередовать кавычки (',") было сложно, так как данная конструкция помимо прочего выводилась с помощью оператора echo из php. Было что то вроде:

PHP
1
2
3
<?php
echo'dk.innerHTML = "<div style='.' " ' " '.'color:red; background-color: blue'."'".'>ЭТО ноВЫЙ ДИВ Я ДАБАВИЛ</div>";';
?>

Получалось что то вроде этого, страшная картина =(, поэтому я искал более элегантное решение данной проблемы, так как чередовать эти кавычки между собой в большом обьеме кода это просто ужасно.

Добавлено через 4 минуты
Ведь с использованием createElement, appendChild думаю получилось бы намного элегантней и проще, но к сожалению реализовать этими методами у меня не получается

Добавлено через 2 часа 4 минуты
Так тоже не работает:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<title>page html</title>
</head>
<body>
<input type="button" value="button" onclick="button()"/>
<hr/>
<div id="mybody">
</div>
</body>
<script type="text/javascript">
idiv=document.getElementById('mybody');
function button()
{
a=document.createElement('div');
c=document.createElement('b');
f=document.createTextNode('hello');
c.appendChild(f);
//c.innerHTML='hello';
//a.innerHTML=c;
a.appendChild(c);
b=a.firstChild.data;
idiv.innerHTML+=b;
}
</script>
</html>

@GuardCat · 04.08.2011, 09:44

Я не до конца понял, что именно вам нужно. Поэтому сделал пример на основе вашего кода (осталось его немного), где и в существующий DIV текст заносится и создаётся новый DIV, в который заносится текст. Кнопки стало две, соответственно.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
    <title>page html</title>
</head>
 
<body>
<input type="button" value="Текст в существующий DIV" onclick="exists()"/>
<input type="button" value="Создать DIV и записать текст" onclick="newDiv()"/>
<hr/>
<div id="mybody">
</div>
 
<script type="text/javascript">
 
function exists()
{
    document.getElementById("mybody").innerHTML="Записано в существующий DIV"
}
 
function newDiv()
{
    if(document.getElementById("myNewDiv")==undefined)
    {
        var el=document.createElement("div");
        el.innerHTML="А вот созданный новый DIV";
        el.id="myNewDiv";
        el.style.backgroundColor="#ffffc0";
        document.body.appendChild(el);
    }
}
</script>
</body>
</html>

Ещё пара моментов: создавая DIV, вначале проверяем, не создан ли он уже, иначе DIV'ы создавались бы бесконечно, а так — один раз.

P.S.
Тег Script должен быть или внутри тега HEAD или внутри тега BODY, чтобы уж совсем всё было правильно.

@faringor · 04.08.2011, 10:22 **[ТС]**

Спасибо хотя бы на этом, но это все таки не то что мне нужно. Буду читать книжки по Javascript. Обещаю как добьюсь желаемого результата выложу исходники может кому будет интересно

@borovik · 04.08.2011, 10:40

угу, ещё и начерти чё надо то ))

@faringor · 05.08.2011, 17:18 **[ТС]**

Свершилось!) вот если кому интересно моя реализация, она простейшая, в дальнейшем будет усложнена но для примера она вставляет div в div =)
вот код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<input type="button" value="button" onclick="btnclick()"/>
 
<hr/>
 
<div id='in_div'>
 
</div>
 
<script type="text/javascript">
 
in_div=document.getElementById('in_div');
 
function btnclick()
 
{
 
a=document.createElement('div');
 
a.appendChild(document.createTextNode('help'));
 
document.body.appendChild(a);
 
}
 
</script>

@GuardCat · 05.08.2011, 17:51

Получается, что DIV вставляется не в DIV, а в BODY.
И как-то, мне кажется, чрезмерно усложнено и много лишних элементов. Просто для информации привожу код без излишеств. Делает ровно то же самое.

JavaScript
1
2
3
4
5
6
7
8
9
10
<input type="button" value="button" onclick="btnclick()"/>
<hr/>
<script type="text/javascript">
  function btnclick()
  {
    a=document.createElement('div');
    a.innerHTML='help';
    document.body.appendChild(a);
  }
</script>

@faringor · 07.08.2011, 21:24 **[ТС]**

Я все понимаю что можно обойтись innerHTML и что результат будет тот же, просто передо мной стояла задача добавлять информацию на страницу именно тем способом каким я это представил, это может показаться бесмысленным но в моем проекте данный способ на самом деле намного приемлемей чем предложенный вами. Надеюсь на ваше понимание, не судите строго не зная искомых причин =)

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@faringor 2 / 2 / 2 Регистрация: 03.08.2011 Сообщений: 94
	03.08.2011, 13:47 [ТС]
	может быть я непонятно написал, но я хочу дабавлять данную конструкцию уже после загрузки страницы по щелчку на пнопке, P.S извиняюсь кода не увидел сначала, данное сообщение не читать))) 0

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	03.08.2011, 13:48
	faringor, мб я непонятно написал - но это так и есть, только по щелчку по диву, в первом посте я невижу никаких кнопок 1

@faringor 2 / 2 / 2 Регистрация: 03.08.2011 Сообщений: 94
	04.08.2011, 10:22 [ТС]
	Спасибо хотя бы на этом, но это все таки не то что мне нужно. Буду читать книжки по Javascript. Обещаю как добьюсь желаемого результата выложу исходники может кому будет интересно 0

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	04.08.2011, 10:40
	угу, ещё и начерти чё надо то )) 0

@faringor 2 / 2 / 2 Регистрация: 03.08.2011 Сообщений: 94
	07.08.2011, 21:24 [ТС]
	Я все понимаю что можно обойтись innerHTML и что результат будет тот же, просто передо мной стояла задача добавлять информацию на страницу именно тем способом каким я это представил, это может показаться бесмысленным но в моем проекте данный способ на самом деле намного приемлемей чем предложенный вами. Надеюсь на ваше понимание, не судите строго не зная искомых причин =) 0