Javascript.RU

Изменение страницы посредством DOM

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/basic-dom-node-properties.

Рассмотрим основные способы изменять DOM, вначале - в общих чертах, затем - на конкретном примере из жизни.

Чтобы создать новый элемент - используется метод document.createElement(тип).

var newDiv = document.createElement('div')

Тут же можно и проставить свойства и содержание созданному элементу.

var newDiv = document.createElement('div')
newDiv.className = 'my-class'
newDiv.id = 'my-id'
newDiv.style.backgroundColor = 'red'

newDiv.innerHTML = 'Привет, мир!'

Добавить новый элемент к детям существующего элемента можно методом appendChild, который в DOM есть у любого тега.

Код из следующего примера добавляет новые элементы к списку:

<ul id="list">
<li>Первый элемент</li>
</ul>

Список:

  • Первый элемент
// элемент-список UL
var list = document.getElementById('list')

// новый элемент
var li = document.createElement('LI')
li.innerHTML = 'Новый элемент списка'

// добавление в конец
list.appendChild(li)

Метод appendChild всегда добавляет элемент последним в список детей.

Новый элемент можно добавить не в конец детей, а перед нужным элементом.
Для этого используется метод insertBefore родительского элемента.

Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.

parentElem.insertBefore(newElem, target)

Например, в том же списке добавим элементы перед первым li.

<ul id="list2">
<li>Первый элемент</li>
</ul>
  • Первый элемент
// родительский элемент UL
var list = document.getElementById('list2')
// элемент для вставки перед ним (первый LI)
var firstLi = list.getElementsByTagName('LI')[0]

// новый элемент
var newListElem = document.createElement('LI')
newListElem.innerHTML = 'Новый элемент списка'

// вставка
list.insertBefore(newListElem, firstLi)

Метод insertBefore позволяет вставлять элемент в любое место, кроме как в конец. А с этим справляется appendChild. Так что эти методы дополняют друг друга.

Метода insertAfter нет, но нужную функцию легко написать на основе комбинации insertBefore и appendChild.

Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя.

list.removeChild(elem)

Если родителя нет "на руках", то обычно используют parentNode. Получается так:

elem.parentNode.removeChild(elem)

Неуклюже, но работает.

Сделаем что-нибудь посложнее.

В качестве реального примера рассмотрим добавление сообщения на страницу.
Чтобы показывалось посередине экрана и было красивее, чем обычный alert.

Сообщение в HTML-варианте (как обычно, можно посмотреть, нажав кнопку):

<style>
.my-message {
   width:300px;
   height:110px;
   background-color:#F08080;
   text-align: center;
   border: 2px groove black;
}
.my-message-title {
  height:20px;
  font-size:120%;
  background-color:red;
}
.my-message-body {
  padding: 5px;
  height: 50px;
}
</style>

<div class="my-message">
  <div class="my-message-title">Заголовок</div>
  <div class="my-message-body">Текст Сообщения</div>
  <input class="my-message-ok" type="button" value="OK"/>
</div>

Как видно - сообщение вложено в DIV фиксированного размера my-message и состоит из заголовка my-message-title, тела my-message-body и кнопки OK, которая нужна, чтобы сообщение закрыть.

Кроме того, добавлено немного простых стилей, чтобы как-то смотрелось.

Показ сообщения состоит из нескольких этапов.

  1. Создание DOM-элементов для показа сообщения
  2. Позиционирование на экране
  3. Запуск функции удаления сообщения по клику на ОК

Для создания сколько-нибудь сложных структур DOM, как правило, используют либо готовые шаблоны и метод cloneNode, создающий копию узла, либо свойство innerHTML.

Следующая функция создает сообщение с указанным телом и заголовком.

function createMessage(title, body) {
  // (1)
  var container = document.createElement('div') 
  
  // (2)
  container.innerHTML = '<div class="my-message"> \
    <div class="my-message-title">'+title+'</div> \
    <div class="my-message-body">'+body+'</div> \
    <input class="my-message-ok" type="button" value="OK"/> \
  </div>'

  // (3)
  return container.firstChild
}

Как видно, она поступает довольно хитро. Чтобы создать элемент по текстовому шаблону, она сначала создает временный элемент (1), а потом записывает (2) его как innerHTML временного элемента (1). Теперь готовый элемент можно получить и вернуть (3).

Сообщение будем позиционировать абсолютно, в центре по ширине и на 200 пикселов ниже верхней границы экрана.

function positionMessage(elem) {
  elem.style.position = 'absolute'

  var scroll = document.documentElement.scrollTop || document.body.scrollTop
  elem.style.top = scroll + 200 + 'px'

  elem.style.left = Math.floor(document.body.clientWidth/2) - 150 + 'px'
}

Не вдаваясь в тонкости позиционирования - заметим, что для свойства top 200 пикселов прибавляются к текущей вертикальной прокрутке, которую браузер отсчитывает либо от documentElement либо от body - зависит от DOCTYPE и типа браузера.

При установке left от центра экрана вычитается половина ширины DIV'а с сообщением (у него стоит width:300).

Наконец, следующая функция вешает на кнопку OK функцию, удаляющую элемент с сообщением из DOM.

function addCloseOnClick(messageElem) {

  var input = messageElem.getElementsByTagName('INPUT')[0]

  input.onclick = function() {
    messageElem.parentNode.removeChild(messageElem)
  }

}

Обратите внимание, при получении элемента функции не используют DOM-свойства previousSibling/nextSibling.

Этому есть две причины. Первая - надежность. Мы можем изменить шаблон сообщения, вставить дополнительный элемент - и ничего не должно сломаться.
Вторая - это наличие текстовых элементов. Свойства previousSibling/nextSibling будут перечислять их наравне с остальными элементами, и придется их отфильтровывать.

Создадим одну функцию, которая выполняет все необходимые для показа сообщения операции.

function setupMessageButton(title, body) {

  // создать
  var messageElem = createMessage(title, body)

  // позиционировать
  positionMessage(messageElem)

  // добавить обработчик на закрытие
  addCloseOnClick(messageElem)

  // вставить в документ
  document.body.appendChild(messageElem)
}

Протестировать то, что получилось, нам поможет следующая кнопка:

<input 
  type="button" 
  value="Показать" 
  onclick="setupMessageButton('Привет!', 'Ваше сообщение')"
/>

Для этого примера вы можете:

Вы освоили основные способы изменения DOM, включая:

  • Создание элементов
  • Вставку элементов в DOM
  • Удаление элементов

Кроме того, посмотрели, как это работает, на реальном примере.


Автор: Nikitozz, дата: 20 июня, 2009 - 14:54
#permalink

Спасибо!
Особенно за живой пример!


Автор: simbiozis (не зарегистрирован), дата: 21 июля, 2009 - 15:12
#permalink

Может я невнимательно смотрел, но по-моему используемый в функции CreateMessage стиль "my-message-ok" не описан в соответствующем файле css.


Автор: Гость (не зарегистрирован), дата: 3 декабря, 2010 - 00:04
#permalink

я думаю, это можно пережить стиль будет дефолтным, серая кнопка-кирпич посередине родителя. не верх эстетики, конечно, но не переживайте так..


Автор: Гость (не зарегистрирован), дата: 25 сентября, 2009 - 20:08
#permalink

Вот такой вопрос. У меня есть форма из кнопок (что-то вроде кнопок на калькуляторе). Мне нужно, чтобы по нажатии на одну из кнопок другая кнопка меняла своё значение. То есть, допустим, у мня есть кнопка b1 со значением "Изменить кнопку b2":
input type="button" name="b1" value="Изменить кнопку b2"
и кнопка b2 с пустым значением:
input type="button" name="b2" value=""
Как сделать так, чтобы после нажатия на кнопу b1, кнопка b2 меняла значение на, напрмер, 7?


Автор: Гость (не зарегистрирован), дата: 26 сентября, 2009 - 19:52
#permalink

Вопрос снят: сам разобрался.


Автор: Гость (не зарегистрирован), дата: 30 сентября, 2009 - 16:39
#permalink

Спасибо огромное за статью - оч помогла.

Есть вопрос: в данном примере при нажатии несколько раз на кнопку "Показать" появляются несколько наших сообщений. А как сделать ограничение, чтобы сообщение появлялось только лишь один раз, вне зависимости от того, сколько раз была нажата кнопка?

Заранее благодарю =)


Автор: Гость (не зарегистрирован), дата: 4 февраля, 2010 - 22:09
#permalink

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


Автор: Гость (не зарегистрирован), дата: 5 октября, 2009 - 18:04
#permalink

я так думаю, что приведенный пример справедлив только в случае, если на страничке только один элемент типа "button", либо если нужная нам кнопка находится самой первой по тексту.


Автор: Гость (не зарегистрирован), дата: 2 декабря, 2010 - 23:30
#permalink

что ж, думайте дальше, это ваше право.

там в функцию передается конкретный объект, и уже в нем ищется input, который, естественно, в конкретном объекте-сообщении только один.


Автор: Mehdi (не зарегистрирован), дата: 6 октября, 2009 - 00:48
#permalink

Теперь я понял как эти алерты делаются. Я использовал другой метод, создаю уже модель этого алерта внутри хтмл в видe блока и ставлю его visibility = "hidden" при нажатии на кнопку меняю visibility=)


Автор: Гость (не зарегистрирован), дата: 20 октября, 2009 - 23:04
#permalink

Шикарная статья, хорошие практические примеры.


Автор: Гость (не зарегистрирован), дата: 5 ноября, 2009 - 16:55
#permalink

Вопрос такой: можно ли менять в новом элементе outerHTML?


Автор: Mikke (не зарегистрирован), дата: 10 ноября, 2009 - 10:46
#permalink

супер! респект!


Автор: Гость (не зарегистрирован), дата: 18 ноября, 2009 - 15:50
#permalink
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}


a=getElementsByClass('rounded');


      var i=0;
while (a[i])  {




    a[i].innerHTML='<table style="width:'+a[i].style.width+';" class="table" cellpadding="0" cellspacing="0"><tr><td class="t-l"></td><td class="top"></td><td class="t-r"></td></tr><tr><td class="left"></td><td>'+a[i].innerHTML+'</td><td class="right"></td></tr><tr><td class="b-l"></td><td class="bottom"></td><td class="b-r"></td></tr></table>';
    i++;

    }

Этот скрипт в конце страницы вствлен. Как Вы поняли он для простого создания блоков-таблиц с круглыми краями. Все прелестно, НО!
Когда такой блок внутри другого блока, то внутренний блок на рисуется. Как разрешить эту проблему.


Автор: данни - бой (не зарегистрирован), дата: 28 ноября, 2009 - 23:25
#permalink

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


Автор: Гость (не зарегистрирован), дата: 16 января, 2010 - 16:07
#permalink

Нет опасности в таких всплывающих окнах.


Автор: subzey, дата: 6 декабря, 2009 - 15:33
#permalink

Илья, быть может, я невнимателен и не заметил, но мне кажется, что будет полезным уточнить, что removeChild() лишь "открепляет" элемент от документа. но не удаляет его. После этого элемент можно снова "прицепить" в дерево DOM, и, возможно, в другом месте.

<p>Щелкните на элемент, чтобы поднять его в списке.</p>
<ul>
<li onclick="move(this)">Мясо</li>
<li onclick="move(this)">Молоко</li>
<li onclick="move(this)">Яйца</li>
<li onclick="move(this)">Рыба</li>
<li onclick="move(this)">Соки</li>
<li onclick="move(this)">Воды</li>
</ul>
<script>
	function move(o){
		var parent = o.parentNode;
		parent.removeChild(o);
		parent.insertBefore(o, parent.firstChild);
	}
</script>

Автор: Гость (не зарегистрирован), дата: 17 января, 2014 - 13:42
#permalink

Извините позднего гостя. Буду благодарен, если кто ответит.
Повторяю на всякий случай пример:

<p>Щелкните на элемент, чтобы поднять его в списке.</p>
<ul>
  <li onclick="move(this)">Мясо</li>
  <li onclick="move(this)">Молоко</li>
  <li onclick="move(this)">Яйца</li>[html]
  <li onclick="move(this)">Рыба</li>
  <li onclick="move(this)">Соки</li>
  <li onclick="move(this)">Воды</li>
</ul>
<script> 
function move(o){ var parent = o.parentNode;
  parent.removeChild(o); 
  parent.insertBefore(o, parent.firstChild); 
}          // самое интересное: правильно работает и без removeChild
</script>

Функция move(o) у меня почему-то правильно работает и без parent.removeChild.
Без parent.insertBefore происходит простое удаление элемента списка под курсором, и это понятно. Но без parent.removeChild я ожидал появление дубликатов, ан нет: элемент под курсором перемещается в начало списка как и прежде.


Автор: JuliusCaesar, дата: 19 января, 2014 - 21:02
#permalink

Метод insertBefore позволяет вставить новый элемент в DOM, либо переместить существующий. Ты применил к существующему, поэтому он и переместился. В твоем случае removeChild действительно не нужен)


Автор: StasAk (не зарегистрирован), дата: 8 декабря, 2009 - 18:42
#permalink

document.getElementById('text').innerHTML='';

но в IE 6 не сробатывает(


Автор: Гость (не зарегистрирован), дата: 10 декабря, 2009 - 01:53
#permalink

Объясните плиз, как можно удалить элемент из документа, если можно то полный код напишите.
function del()
{
var list = document.getElementById('list')
list.removeChild(li)
}

Заранее благодарю.


Автор: Гость (не зарегистрирован), дата: 24 марта, 2010 - 14:22
#permalink

замени
list.removeChild(li)
на
list.removeNode(list)

или
заведи элемент li
var list = document.getElementById('list')
var li=list.getElementsByTagName('LI')
list.removeChild(li)


Автор: Гость (не зарегистрирован), дата: 10 декабря, 2009 - 02:34
#permalink

Либо, чтобы при щелчке элемент не перемещался на верх, а удалялся


Автор: Гость (не зарегистрирован), дата: 10 декабря, 2009 - 02:45
#permalink

А, все, дошло, всем спасибо )))))


Автор: Гость (не зарегистрирован), дата: 10 декабря, 2009 - 02:53
#permalink

Терь другой вопрос, можно ли добавить объект на который можно применить "клик"???


Автор: Severus (не зарегистрирован), дата: 31 декабря, 2009 - 04:30
#permalink

Хм,интересная статья.Спасибо)Надо еще перемещать это окошко позволить


Автор: zero.module (не зарегистрирован), дата: 19 января, 2010 - 15:17
#permalink

Посмотрите на jQuery UI


Автор: Я (не зарегистрирован), дата: 23 января, 2010 - 06:56
#permalink

Не нравится мне этота функция создания!

function createMessage(title, body) {
  // (1)
  var container = document.createElement('div') 
  
  // (2)
  container.innerHTML = '<div class="my-message"> \
    <div class="my-message-title">'+title+'</div> \
    <div class="my-message-body">'+body+'</div> \
    <input class="my-message-ok" type="button" value="OK"/> \
  </div>'

  // (3)
  return container.firstChild
}

innerHTML должен использоваться только для создания текста в элементах страницы, а лучше вообще не использоваться! как-то не профессионально это! Я думаю нужно было исползовать container.createElement('div') а не container.innerHTML = '

', хотя возможно я и ошибаюсь, я сам в этом новичёк, если я не прав поправьте, но то что через DOM добраться к элементам, созданным через innerHTML не возможно - это факт, лично с этим сталкивался!


Автор: Илья Кантор, дата: 23 января, 2010 - 13:23
#permalink

Да, вы новичок, и поэтому вам не нравится. Создание через innerHTML - такой же надежный способ как и через DOM. При этом он зачастую проще, нагляднее и быстрее.


Автор: Гость (не зарегистрирован), дата: 27 января, 2010 - 06:49
#permalink

согласен на счёт innerHTML есть ряд сложностей, не помню в чём конкретно, но я с ними сталкивался, помоему IE не вешает события на динамически создаваемый элемент select и ещё какие то траблы были...
Так что при создании по настоящему сложного интерфейса лучше использовать DOM.


Автор: Гость (не зарегистрирован), дата: 27 января, 2010 - 06:54
#permalink

хотя возможно я чего то не догоняю, извините если туплю, пора спать ложиццо))


Автор: Гость (не зарегистрирован), дата: 22 февраля, 2010 - 15:02
#permalink

У меня тоже в IE6 (про более поздние версии не знаю) обработчик событий onclick, навешанный через innerHTML, не срабатывает. Не воспринимается и elem.onklick='...' (где elem - элемент DOM). Firefox'овский elem.setAttribute('onclick','...') IE6 тоже не понимает. Получается через outerHTML, напр.:

elem.outerHTML="" //-работает.

Но опять же outerHTML непонятен для Firefox...
Кто-нибудь знает универсальный способ ввести элемент DOM с обработчиком событий?


Автор: Гость (не зарегистрирован), дата: 15 апреля, 2010 - 17:08
#permalink

Любители ие6 чем-то похожи на людей, которые хотят не идти вперед вместе с прогрессом, а чтобы прогресс шел для них назад.

Так что совет - если не можете отказаться от ие6 - обратитесь к врачу. Иначе вы уподобляетесь средневековому невежде, которому проще облить грязью и заклеймить еретиком, чем попытаться понять что-то.


Автор: trikadin (не зарегистрирован), дата: 21 апреля, 2010 - 20:55
#permalink

Угу. В школе - уроки программирования на javascript (!), но при этом стоят IE6(!!!). Знаю, это ересь, но во такой у нас судьбец... На дом задают ДЗ Круто, да? Приходится знать особенности "лучшего" из браузеров)


Автор: Гость (не зарегистрирован), дата: 23 апреля, 2010 - 17:15
#permalink

C радостью бы отказался. Но сложно заставить отказаться 80% юзеров, которые будут смотреть мои страницы со скриптами с помощью IE


Автор: mc (не зарегистрирован), дата: 7 октября, 2010 - 19:30
#permalink

Универсальнее не бывает:

function Listen(obj, evt, fn) {
if (obj.addEventListener) obj.addEventListener(evt, fn, false);
else if (obj.attachEvent) obj.attachEvent('on' + evt, fn);
}


Автор: Гость (не зарегистрирован), дата: 5 февраля, 2010 - 21:50
#permalink

Не работает всё это в експлорерах 6 и 7-м.... что делать?

<select id="sel" name="sel" size="10" multiple="multiple">
  <option value="0">zero</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

var value = document.getElementById('sel').value
var sel = document.getElementById('sel');
var text = sel.options[sel.selectedIndex].text;

var sel = document.getElementById('sel');
// создаем элемент option
var opt = document.createElement('option');
// определяем значение и текст нового элемента
opt.value = 4;
opt.innerHTML = 'four';
// добавляем option в конец select
sel.appendChild(opt);


Автор: Гром (не зарегистрирован), дата: 17 февраля, 2010 - 14:28
#permalink

Вопрос. А есть ли событие, которое срабатывает при удалении элемента? Чтобы обрабатывать момент когда элемент удаляется.


Автор: Гость (не зарегистрирован), дата: 7 марта, 2010 - 12:06
#permalink

А можно ли использовать innerHTML с window.open? Например:

function win(content){
 dop=wondow.open('',"test","");
 dop.innerHTML=content;
 return false;
}

Автор: Гость (не зарегистрирован), дата: 15 апреля, 2010 - 17:10
#permalink

Почитайте азы. Тогда таких вопросов не возникнет.


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 08:34
#permalink

Азы читал, но конкретного ничего не нашел
В ИЕ работает а в FireFox нет


Автор: Сергей Сергеевич (не зарегистрирован), дата: 10 марта, 2010 - 23:27
#permalink

Подскажите, пожалуйста, как сделать создание и добавление скрипта в нужном месте страницы?
пример такой:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function rrr(){
var elem = document.createElement("script");
elem.setAttribute("type", "text/javascript");
elem.setAttribute("src", "03_09.js");
h_data.appendChild(elem);}
</script>
</head>
<body onClick=rrr()>
<div id="h_data">
блок для сценария
</div>

<div id="h1_data">
блок после сценария
</div>
</body>
</html>

А проблема в следующем: при исполнении скрипта всё содержимое body меняется на содержимое скрипта.
содержимое скрипта:

document.write('<TABLE WIDTH=100% BORDER=1 CELLPADDING=2 CELLSPACING=2><COL WIDTH=125><COL WIDTH=60><COL><tr valign="top"><td><b> 9 марта </b></td><td><b>2010</b></td><td>получилось</td></tr></TABLE>');

у меня скрипт срабатывает в Chrome3 и Firefox3.6, в IE8 не срабатывает.
Заранее спасибо!


Автор: Гость (не зарегистрирован), дата: 14 марта, 2010 - 23:19
#permalink

А что DOM не работает с таблицами


Автор: Гость (не зарегистрирован), дата: 15 апреля, 2010 - 17:14
#permalink

Это, видимо, риторический комментарий.


Автор: Гость (не зарегистрирован), дата: 5 мая, 2010 - 20:02
#permalink

Суть не в содержании скрипта, а в методе реализации вызова скрипта - динамически (в зависимости от внешних параметров)


Автор: Гость (не зарегистрирован), дата: 15 марта, 2010 - 02:52
#permalink

Объясните, пожалуйста, что не срабатывает.
в скрипте использую:

document.all.listDiv.innerHTML = '<select name="t_width" id="t_width">'+list_arr[t_type]+'</select>';

соответственно в хтмл:

<div id="listDiv" style="display:inline;">
 <select name="t_width" id="t_width">
  <option value="0">&nbsp;&nbsp;&nbsp;</option>
 </select>
</div>

Выдает ошибку "document.all is undefined".
При чем ход скопирован с работающего скрипта с изменением только id.


Автор: zemaj, дата: 24 марта, 2010 - 20:29
#permalink

Спасибо, ответ уже не нужен. Оказалась проблема в самой винде. Скрипт стал работать после установки заплатки


Автор: Гость (не зарегистрирован), дата: 10 апреля, 2010 - 18:16
#permalink

Подскажите, пожалуйста, вот такой модуль

файл test.html

<html> 
<head>
		<title>Текст</title>
		<script src="test.js"></script>
</head>
<body>
	<h1>Тестовый файл</h1>
	<div id="MyElement" class="big" alpha="omega">55555</div>
	<div id="1">11111111111111111
		<div id="1_1">11</div>
		<div id="1_2">12</div>
	</div>	
	<div id="2">22222222222222222</div>
	var idf = "1_1"
	var df = "none"
	<input type="button" value="Запустить" onclick="test(idf,df)"/> 
</body>
</html>

файл test.js

function test(idf,df) 
    {
		window.document.getElementById(idf).style.display = df
	}

не работает....
пробовал и так

<input type="button" value="Запустить" onclick="test("1_2","none")"/>

не могу понять что не так.


Автор: Гость (не зарегистрирован), дата: 10 апреля, 2010 - 18:19
#permalink

ранее при каком-то варианте работало, что изменил уже не помню, но работать перестало


Автор: Гость (не зарегистрирован), дата: 10 апреля, 2010 - 19:04
#permalink
var idf = "1_1"
var df = "none"
<input type="button" value="Запустить" onclick="test(idf,df)"/>

этот вариант прошу не критиковать, зарапортовался....

вот так тоже не работает

<input type="button" value="Запустить" onclick="test("1_2","none")"/>

Автор: B@rmaley.e><e, дата: 10 апреля, 2010 - 22:23
#permalink

Вам подсветка синтаксиса в месте кавычек ни о чем не говорит?


Автор: Гость (не зарегистрирован), дата: 10 апреля, 2010 - 19:15
#permalink

Вот как!?

Правильно надо было так

<html> 
	<head>
		<title>Текст</title>
		<script src="test.js"></script>
	</head>
<body>
	<h1>Тестовый файл</h1>
	<div id="1">11111111111111111
		<div id="1_1">11</div>
		<div id="1_2">12</div>
	</div>	
	<div id="2">22222222222222222</div>
	<input type="button" value="Запустить" onclick="test('1_2','none')"/> 
</body>
</html>

'1_2','none' нужно ставить такие ' кавычки, а не такие "...

Но все равно, в чем смысл функции я думаю понятно.
Является ли это решение "разумным"?
Если кто-то подскажет, буду признателен.


Автор: Гость (не зарегистрирован), дата: 15 апреля, 2010 - 17:25
#permalink

Если глобальная цель была скрыть див по нажатию кнопки, то проще было написать строку из функции сразу в обработчик. Функция тут не нужна.

А вообще, учебник Вам в руки. Иначе программирование превратится в передвижение по комнате в темноте.


Автор: Гость (не зарегистрирован), дата: 25 мая, 2012 - 00:05
#permalink

window.onload = function(){
function test(idf,df){
window.document.getElementById(idf).style.display = df
}
}

может так ...


Автор: Гость (не зарегистрирован), дата: 26 мая, 2010 - 19:57
#permalink

Здравствуйте!
Вроде создал у себя документ как в примере:

<ul id="list2">
<li>Первый элемент</li>
</ul>

<script>
function da() {
// родительский элемент UL
var list = document.getElementById('list2')
// элемент для вставки перед ним (первый LI)
var firstLi = list.getElementsByTagName('LI')[0]

// новый элемент
var newListElem = document.createElement('LI')
newListElem.innerHTML = 'Новый элемент списка'

// вставка
list.insertBefore(newListElem, firstLi)
}
</script>

<a href="" onclick="da();">aaa</a>

Но создавать элемент - мой firefox отказывается, где я не прав?


Автор: Гость (не зарегистрирован), дата: 28 мая, 2010 - 04:12
#permalink

атрибут href у Вас пустой, если не требуется открывать по ссылке другой документ, вставляйте решетку (#).

<a href="#" onclick="da()">aaa</a>


Автор: Skipp, дата: 18 июня, 2010 - 13:44
#permalink

юпии я 50000 человек который посмортел утот пост, призы будут?
Сори за офтоп)


Автор: ARLEVNAR, дата: 18 июля, 2010 - 19:10
#permalink

Что то у меня не работает создание элемента не подскажете с чем может быть связано???

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Главная</title>
  <script src="js/lib.main.js" type="text/javascript"></script>
 </head>
 <body>
  
 </body>
</html>

А вот в принципе и JavaScript:

// JavaScript Document

   //alert('Проверка скрипта');
   var newDiv = document.createElement('div');
   //document.getElementsByTagName("BODY").style.margin = 0;
   //document.getElementsByTagName("BODY").style.padding = 0;
   //document.getElementsByTagName("BODY").style.textAlign = 'center';
   newDiv.id = 'main';
   newDiv.width = '1200px';
   newDiv.height = '500px';
   newDiv.style.marginLeft = 'auto';
   newDiv.style.marginRight = 'auto';
   newDiv.style.border = '1px solid black';
   newDiv.innerHTML = '<h1>ТЕСТ</h2>';

FireBug показывает элемент а вот в окне браузера текст не отображается (пользуюсь Mozilla Firefox 3.6.6)


Автор: Яростный Меч, дата: 28 августа, 2010 - 11:39
#permalink

Ну а где добавление созданного элемента на страницу?
Например, document.body.appendChild(newDiv);

Кстати, это должно произойти уже после формирования DOM. К примеру, в window.onload

"newDiv.width = '1200px';
newDiv.height = '500px';"

надо в стиле это указывать
newDiv.style.width = '1200px';
newDiv.style.height = '500px';


Автор: Гость (не зарегистрирован), дата: 6 сентября, 2010 - 11:14
#permalink

Не могу понять почему не работает код вида
document.createElement('li').innerHTML='New Element'


Автор: B@rmaley.e><e, дата: 6 сентября, 2010 - 16:12
#permalink

С чего Вы взяли, что он не работает? Очень даже работает.


Автор: vinet, дата: 2 декабря, 2010 - 01:23
#permalink

Как узнать входит ли элемент в родителя?

например

< div class="AA" >
< span class="BB" >Text< /span >
< /div >

Можно ли узнать, входит ли элемент спан.ВВ в див.АА?


Автор: B@rmaley.e><e, дата: 2 декабря, 2010 - 09:53
#permalink

Либо искать внутри див.АА спан.ВВ, либо идти от спан.ВВ по всем родителям и проверять, не является ли родитель див.АА.


Автор: Гость (не зарегистрирован), дата: 8 февраля, 2011 - 11:47
#permalink

Попробовал пример в "Добавление в DOM" на этой странице. Он мне выдал ошибку:
ошибка: Cannot call method 'appendChild' of null
вот. остальные сработали. если это зависит от браузера, то у меня Хром.


Автор: Гость (не зарегистрирован), дата: 7 апреля, 2011 - 11:54
#permalink

Все замечательно. Одно замечание по тексту статьи. Примеры со списками не запускаются пишет в FF list is null мне кажется не отрабатывает эта строка :
var list = document.getElementById('list') а не работает она из за того что не видит описание списка, которое выше пр тексту. Извините если не прав.


Автор: Гость (не зарегистрирован), дата: 9 апреля, 2011 - 13:50
#permalink
function createMessage(title, body) {
	var container = document.createElement('div')
	container.innerHTML = '<div class="my-message"> \
			<div class="my-message-title">'+title+'</div> \
			<div class="my-message-body">'+body+'</div> \
			<input class="my-message-ok" type="button" value="OK"/> \
		</div>'
		alert( container.firstChild ); 
  return container.firstChild
}

Выходит сообщение "null"

В чём дело может кто помоч ... плз ))


Автор: ACXap (не зарегистрирован), дата: 13 апреля, 2011 - 19:21
#permalink

<body>
<div>
   <div>
      <div>
         .....
<div id="content">
   <div>
      <div>
         .....
<div style="background: #BEDEF0;">
   <div>
      <div>
         .....
<div id="footer">
   <div>
      <div>
         .....
<div>
   <div>
      <div>
         .....
</body>

Имеется такой код(не полный), структура на всех страницах сайта повторяется, меняется только количество DIV, каким способом возможно удалить?

<div style="background: #BEDEF0;">
   <div>
      <div>
         .....

по id, его просто нет, по тегу, но количество элементов на каждой странице разное, по Name нельзя, по ClassName тоже. Перебирать все DIV и искать по стилю?

Автор: Гость (не зарегистрирован), дата: 20 августа, 2011 - 17:34
#permalink

В пункте "Добавление в конкретное место" заметил ошибку.

При нажатии на кнопку "Запустить" выдаёт ошибку.

Использую последнюю версию хрома.


Автор: Гость (не зарегистрирован), дата: 6 сентября, 2011 - 15:37
#permalink

+1
Добавление в DOM не работает


Автор: Андрей38, дата: 19 сентября, 2011 - 11:00
#permalink

r


Автор: Андрей38, дата: 19 сентября, 2011 - 11:03
#permalink

как добавить свойство си эс эс clip не в листинге стилей,а в скрипте на Квери?
Это НЕработающий пример c клипом

<style>
#ros{
//оригинальноый синтаксис	
	clip: rect(auto,auto,auto,35px);
}
</style>
....
<script>
var wid=$('img').width()
$('#ret').css({'width':wid,'clip': 'rect'('auto','auto','auto','35px')})
</script>

Автор: m-xdt (не зарегистрирован), дата: 22 сентября, 2011 - 03:18
#permalink
var newDiv = document.createElement('div')
newDiv.className = 'my-class'
newDiv.id = 'my-id'

Ребята, не путайте свойства и атрибуты. В данном случае должна использоваться конструкция setAttribute, потому что все, что здесь указано - это атрибуты тэгов, и к свойствам узла DOM не имеют никакого отношения. Работать оно, конечно, будет и так (браузеры умные и создают свойства, аналогичные атрибутам), но правильно всё-таки через setAttribute, дабы не возникло путаницы.


Автор: olga153b, дата: 24 сентября, 2011 - 13:31
#permalink

Добавление в дом не работает дает
ошибка: list is null в ff


Автор: Questioner, дата: 2 ноября, 2011 - 13:44
#permalink

как читается DOM?


Автор: Гость (не зарегистрирован), дата: 7 декабря, 2011 - 21:30
#permalink

Если мечтаешь о радуге,будь готов попасть под дождь.


Автор: wp2 (не зарегистрирован), дата: 20 декабря, 2011 - 20:53
#permalink

долгое время не получалось добавить LI к существующему списку.

сделал так:

var a = document.body.getElementsByTagName('ul');
var newL = document.createElement('LI');
newL.innerHTML = "5";
a[0].appendChild(newL);

то есть, искать надо ul для начала. А потом брать нужный элемент с индексом!!!
(a[0] в нашем случае). Хз, может кому поможет.


Автор: Гость (не зарегистрирован), дата: 21 декабря, 2011 - 23:38
#permalink

ребята помогите пожалуста clearTimeout(menuTime)
menuTime=setTimeout(function(){
$ac_loading.show();
var new_w = $(window).width() - $title.outerWidth(true);
$menu.stop().animate({width:new_w + 'px'},700,toggleMenu('up'))

},700) function toggleMenu(dir){
$menuItems.each(function(i){
var el_title = $(this).children('a:first'),marginTop,opacity,easing;

if(dir == 'up'){
marginTop = '0px';
opacity = '1';
// easing = 'easeOutBack';

}
else if(dir == 'down'){
marginTop = '60px';
opacity ='0';
// easing ='easeInBack';
}
$el_title.stop().animate({'marginTop' : marginTop , 'opacity' : opacity },200+i*200);
})
}


Автор: Гость (не зарегистрирован), дата: 1 марта, 2012 - 06:57
#permalink

Сообщение не блокирует страницу. Наверное надо прозрачный слой под него подкладывать?


Автор: Гость (не зарегистрирован), дата: 17 мая, 2012 - 18:32
#permalink

Почему не работает этот пример, как хотелось быю Вместо элементов tr, td к таблица добавляются только input.

table = document.createElement("table");
for (i=0;i<3;i++) {
table.appendChild(
document.createElement("tr").appendChild(
document.createElement("td").appendChild(
document.createElement("input")
)
)
);
}


Автор: Я Есть Я ! (не зарегистрирован), дата: 25 декабря, 2012 - 12:46
#permalink

Помогите сделать, почти такое же окно.
Только в правом углу, и прямоугольное.
напишите мне полный текст, уже сделанного окна.
Если не сложно. у меня скрипт java как я понял это делается через
mpage (val). Я хочу сделать отдельный лог в игре . Варвары


Автор: Гость (не зарегистрирован), дата: 9 марта, 2013 - 15:09
#permalink

А чем можно заменить setupMessageButton ? на него ff ругается!


Автор: Наталья Вл (не зарегистрирован), дата: 30 июня, 2013 - 00:18
#permalink

Скажите пожалуйста а как например сделать чтобы при onClick появлялся постепенно текст? Например после одного щелчка появляется одна фраза, затем после второго щелчка вторая фраза и тд.


Автор: Гость (не зарегистрирован), дата: 9 июля, 2013 - 09:38
#permalink

С точки зрения программирования лучше будет создать переменную шага и наращивать её. То бишь описываем переменную. И с каждым нажатием кнопки значение делаем +1. И условием в зависимости от значения выдаем нужное сообщение.


Автор: dimka_68, дата: 25 июля, 2013 - 12:40
#permalink

Вопрос несколько глупый, но всё же. Почему при следующих операциях:

var container = document.createElement('div');
container.innerHTML = '<div class="my-message"> \
<div class="my-message-title">'+title+'</div> \
<div class="my-message-body">'+body+'</div> \
<input class="my-message-ok" type="button" value="OK"/> \
</div>';

На выходе не 2 вложенных дива, а один.
Моя логика - создали элемент див и наполнили его ещё одним дивом. По моей логике, в итоге, должно получиться:

<div><div class="my-message"> ... </div></div>

В чём я ошибся, подскажите, пожалуйста?


Автор: Гость (не зарегистрирован), дата: 14 ноября, 2013 - 01:45
#permalink

В начале статьи есть ответ. Чтобы создать элемент по текстовому шаблону, нужен временный контейнер.


Автор: Гость (не зарегистрирован), дата: 12 августа, 2013 - 15:40
#permalink

Кредитный портал Dengi-Vdolg.Com - это деньги в долг просто


Автор: Art!P, дата: 10 апреля, 2014 - 17:01
#permalink

Все же в jQuery с DOM-ом удобнее работать


Автор: Гость (не зарегистрирован), дата: 1 июня, 2014 - 17:55
#permalink
dsfdfdfsdfsd

Автор: Гость (не зарегистрирован), дата: 21 июня, 2014 - 20:57
#permalink

здравствуйте! а зачем в функции используется обратный слеш (\) ?


Автор: Гость (не зарегистрирован), дата: 3 июля, 2014 - 22:40
#permalink

подскажите в чем ошибка ?
при введение в input текста ,функция send не возвращает никакого значения
почему?

function send(){
var d =document.getElementById('in').getAttribute('value');
console.log(d);
}


Автор: Гость (не зарегистрирован), дата: 3 июля, 2014 - 22:42
#permalink
[html]
подскажите в чем ошибка ?
при введение в input текста ,функция send не возвращает никакого значения[/html]

<input size="30" value="" id="in" type="text"/>
<input type="button" value="отправить" id="i" onclick="send()"/>

<script type="text/javascript">
function send(){
var d =document.getElementById('in').getAttribute('value');
console.log(d);
}
</script>

Автор: Влад31/08/2000, дата: 8 июля, 2014 - 14:12
#permalink

elem.parentNode.removeChild(elem)??
как насчет elem.outerHTML=""?


Автор: new_developer, дата: 29 июля, 2014 - 22:22
#permalink

скопировал всё с этого примера, почему-то после клика ошибка пишет что setupMessageButton не определена

window.onload = function() { 

	
		function createMessage(title, body) {
		  // (1)
		  var container = document.createElement('div') 
		  
		  // (2)
		  container.innerHTML = '<div class="my-message"> \
		    <div class="my-message-title">'+title+'</div> \
		    <div class="my-message-body">'+body+'</div> \
		    <input class="my-message-ok" type="button" value="OK"/> \
		  </div>'

		  // (3)
		  return container.firstChild
		}


		
		function positionMessage(elem) {

		    elem.style.position = 'absolute'

		    var scroll = document.documentElement.scrollTop || document.body.scrollTop
		    elem.style.top = scroll + 200 + 'px'

		    elem.style.left = Math.floor(document.body.clientWidth/2) - 150 + 'px'
		}

		function addCloseOnClick(messageElem) {

		    var input = messageElem.getElementsByTagName('INPUT')[0]

		    input.onclick = function() {

		    	messageElem.parentNode.removeChild(messageElem)

			}
		}


	function setupMessageButton(title, body) {

		  // создать
		  var messageElem = createMessage(title, body)

		  // позиционировать
		  positionMessage(messageElem)

		  // добавить обработчик на закрытие
		  addCloseOnClick(messageElem)

		  // вставить в документ
		  document.body.appendChild(messageElem)
	}

}
<input type="button" value="Показать" onclick="setupMessageButton('Привет!', 'Ваше сообщение')" />

Автор: systeamnik (не зарегистрирован), дата: 22 сентября, 2014 - 02:31
#permalink

За статью СПАСИБО помогло!
но подскажите возможно ли сохранить созданный элемент в html документе?
созданный элемент после обновления страница пропадает.
Например :

[js]
function c_element(){
			//добаление элемента к сущ. элементу
			var list = document.getElementById('list');
			//создаем новый элемент
			var li = document.createElement('LI');
			li.id = 'new-id';
			li.innerHTML = 'Новый элемент добавленный через JS';
			//добаление в конец
			list.appendChild(li);
			list.addCloseOnClick(li);
		}
		function x_element(){
			var x = document.getElementById('new-id');
			x.parentNode.removeChild(x);
		}
[/js]
		
	<a href="#" onclick="c_element()">Добавить</a>
	<a href="#" onclick="x_element()">Удалить</a>

	<br>
	<br>
	<ul id="list">
		<li>Перый</li>
		<li>Второй</li>
	</ul>

Автор: Гость (не зарегистрирован), дата: 22 сентября, 2014 - 22:49
#permalink

а как преобразовать строку в число parseInt() или Number()?? дитенахой


Автор: Гость (не зарегистрирован), дата: 23 сентября, 2014 - 15:16
#permalink

var a = 5;
var b = a+"";


Автор: michail.k, дата: 8 апреля, 2015 - 14:24
#permalink

помогите разобраться как выбрать элемент списка , чтоб он изменил цвет:

function test1() {
var list = document.getElementById("List");
var element = list.firstChild;
if (element != null) {
element.setAttribute("style", "color:green;");
}

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
4 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum