2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
1

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

03.08.2011, 13:32. Показов 4075. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Доброго времени суток. хочу через 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;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.08.2011, 13:32
Ответы с готовыми решениями:

JavaScript HTML DOM
Подскажите, пожалуйста, как добавить условие вывода кнопок... Перед первой кнопкой открывается...

Написать скрипт, рекурсивно обходящий дерево DOM страницы dom.html, начиная от корня DOM
Написать скрипт на языке JavaScript, рекурсивно обходящий дерево DOM страницы dom.html, начиная от...

Возможно выстроить HTML DOM с нуля посредством JavaScript?
Возможно выстроить HTML DOM с нуля посредством JavaScript?

Написать JavaScript, который рекурсивно обходит дерево DOM страницы change.html
Написать скрипт на языке JavaScript, рекурсивно обходящий дерево DOM страницы change.html, начиная...

12
210 / 204 / 52
Регистрация: 25.07.2010
Сообщений: 1,162
03.08.2011, 13:41 2
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>";
работает
1
2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
03.08.2011, 13:47  [ТС] 3
может быть я непонятно написал, но я хочу дабавлять данную конструкцию уже после загрузки страницы по щелчку на пнопке, P.S извиняюсь кода не увидел сначала, данное сообщение не читать)))
0
210 / 204 / 52
Регистрация: 25.07.2010
Сообщений: 1,162
03.08.2011, 13:48 4
faringor, мб я непонятно написал - но это так и есть, только по щелчку по диву, в первом посте я невижу никаких кнопок
1
2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
03.08.2011, 22:22  [ТС] 5
Цитата Сообщение от 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 ошибок не выдает. Если есть другое решение пожалуйста подскажите. предложенный боровиком вариант я заставить работать так и не смог =(
0
210 / 204 / 52
Регистрация: 25.07.2010
Сообщений: 1,162
03.08.2011, 22:41 6
вот рабочий код
я понял так: тыкаешь на слово добавить и в диве 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
0
2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
04.08.2011, 09:02  [ТС] 7
Больщое спасибо боровик за помощь, предложенный тобой вариант намного проще и понятней, думаю на этом решении я и остановлюсь. Я использовал такое решение ранее но мне пришлось отказаться от него только потому, что вместо слоя с надписью, мне необходимо было каждый раз вставлять в документ более сложные структуры кода и чередовать кавычки (',") было сложно, так как данная конструкция помимо прочего выводилась с помощью оператора 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>
0
Просто любитель
626 / 464 / 120
Регистрация: 20.01.2011
Сообщений: 865
Записей в блоге: 2
04.08.2011, 09:44 8
Я не до конца понял, что именно вам нужно. Поэтому сделал пример на основе вашего кода (осталось его немного), где и в существующий 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, чтобы уж совсем всё было правильно.
0
2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
04.08.2011, 10:22  [ТС] 9
Спасибо хотя бы на этом, но это все таки не то что мне нужно. Буду читать книжки по Javascript. Обещаю как добьюсь желаемого результата выложу исходники может кому будет интересно
0
210 / 204 / 52
Регистрация: 25.07.2010
Сообщений: 1,162
04.08.2011, 10:40 10
угу, ещё и начерти чё надо то ))
0
2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
05.08.2011, 17:18  [ТС] 11
Свершилось!) вот если кому интересно моя реализация, она простейшая, в дальнейшем будет усложнена но для примера она вставляет 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>
0
Просто любитель
626 / 464 / 120
Регистрация: 20.01.2011
Сообщений: 865
Записей в блоге: 2
05.08.2011, 17:51 12
Получается, что 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>
0
2 / 2 / 2
Регистрация: 03.08.2011
Сообщений: 94
07.08.2011, 21:24  [ТС] 13
Я все понимаю что можно обойтись innerHTML и что результат будет тот же, просто передо мной стояла задача добавлять информацию на страницу именно тем способом каким я это представил, это может показаться бесмысленным но в моем проекте данный способ на самом деле намного приемлемей чем предложенный вами. Надеюсь на ваше понимание, не судите строго не зная искомых причин =)
0
07.08.2011, 21:24
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.08.2011, 21:24
Помогаю со студенческими работами здесь

PHP HTML DOM как работать?
Здравствуйте, подскажите как сделать чтобы выводился текст между 2 div`ами. Я раньше находил такой...

Как получить html динамически созданного элемента в DOM?
Всем привет. Вынес себе уже весь мозг!! Делаю проверку на заполнение полей перед отправкой...

Как получить текущее состояние DOM в виде текста HTML?
Привет. Есть html файл. Открываем его в новом окне и чего-то там в его структуре при помощи...

В чем отличие между html и DOM элементами и как применять?
Добрый день. Я сейчас учу jQuery. При получении коллекции можно работать как с DOM элементами так и...

C# + DOM (как создать такую структуру программно)
Нужно создать такую структуру в C#. &lt;root&gt; &lt;node1 id=”1”&gt; &lt;node11&gt;11.11&lt;/node11&gt;...

Обход DOM дерева JavaScript
Добрый день, уважаемые. Есть сайт, на нем размещено n-ное количество DIV'ов (&lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru