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 и что результат будет тот же, просто передо мной стояла задача добавлять информацию на страницу именно тем способом каким я это представил, это может показаться бесмысленным но в моем проекте данный способ на самом деле намного приемлемей чем предложенный вами. Надеюсь на ваше понимание, не судите строго не зная искомых причин =)

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@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