Javascript изменение кода страницы

HTML DOM — Изменение HTML Элементов

HTML элементы можно изменять, используя JavaScript, HTML DOM и события.

Изменить HTML Элемент

HTML DOM и JavaScript могут изменять внутреннее содержимое и атрибуты HTML элементов.

Следующий пример изменяет цвет фона элемента :

Пример

Изменить Текст HTML Элемента — innerHTML

Простейший способ получить и модифицировать содержимое элемента — использование свойства innerHTML.

Следующий пример изменяет текст элемента

:

Пример

Изменить HTML Элемент Используя События

Обработчик события позволяет вам выполнить код, когда происходит событие.

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

Вы можете прочитать больше о событиях в следующем уроке.

Следующий пример изменяет цвет фона элемента при нажатии кнопки:

Пример

Изменить Текст Элемента — с помощью Функции

Следующий пример использует функцию для изменения текста элемента

при нажатии кнопки:

Пример

Использование Объекта Стиля (style)

Объект style (стиль) каждого HTML элемента представляет его индивидуальный стиль.

Следующий пример использует функцию для изменения стиля элемента при нажатии кнопки:

Пример

Изменить шрифт и цвет Элемента

Следующий пример использует функцию для изменения стиля элемента

при нажатии кнопки:

Источник

JavaScript HTML DOM Изменение HTML

HTML DOM позволяет JavaScript изменять содержимое элементов HTML.

Изменение потока вывода HTML

JavaScript может создавать динамический HTML контент:

В JavaScript document.write() можно использовать для записи непосредственно в выходной поток HTML:

Пример

Никогда не используйте document.write() после загрузки документа. Это перезапишет документ.

Изменение содержимого HTML

Самый простой способ изменить содержимое HTML элемента — использовать innerHTML свойство.

Чтобы изменить содержимое элемента HTML, используйте этот синтаксис:

В этом примере изменяется содержимое

элемента:

Пример

• HTML документ выше содержит

  элемент с id=»p1″

• Мы используем HTML DOM, чтобы получить элемент с id=»p1″
• JavaScript изменяет содержимое ( innerHTML ) этого элемента на «Новый текст!»

В этом примере изменяется содержимое элемента:

Пример

• HTML документ выше содержит элемент с id=»id01″
• Мы используем HTML DOM, чтобы получить элемент с id=»id01″
• JavaScript изменяет содержимое ( innerHTML ) этого элемента на «Новый заголовок»

Изменение значения атрибута

Чтобы изменить значение атрибута HTML, используйте этот синтаксис:

В этом примере изменяется значение атрибута src элемента:

Пример

• HTML документ выше содержит элемент с id=»myImage»
• Мы используем HTML DOM, чтобы получить элемент с id=»myImage»
• JavaScript изменяет src атрибут этого элемента с «smiley.gif» на «landscape.jpg»

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

JavaScript HTML DOM — Changing HTML

The HTML DOM allows JavaScript to change the content of HTML elements.

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

This example changes the content of a

element:

Example

• The HTML document above contains a

  element with id=»p1″

• We use the HTML DOM to get the element with id=»p1″
• A JavaScript changes the content ( innerHTML ) of that element to «New text!»

This example changes the content of an element:

Example

• The HTML document above contains an element with id=»id01″
• We use the HTML DOM to get the element with id=»id01″
• A JavaScript changes the content ( innerHTML ) of that element to «New Heading»

Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:

This example changes the value of the src attribute of an element:

Example

• The HTML document above contains an element with id=»myImage»
• We use the HTML DOM to get the element with id=»myImage»
• A JavaScript changes the src attribute of that element from «smiley.gif» to «landscape.jpg»

Dynamic HTML content

JavaScript can create dynamic HTML content:

Example

document.write()

In JavaScript, document.write() can be used to write directly to the HTML output stream:

Example

Never use document.write() after the document is loaded. It will overwrite the document.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Изменение страницы посредством 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 = 'Привет, мир!'

Добавление в DOM

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

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

// элемент-список 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 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 .

Удаление узла DOM

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

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

elem.parentNode.removeChild(elem)

Пример — показ сообщения

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

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

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

 .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 
Заголовок
 
Текст Сообщения
 
 

Как видно — сообщение вложено в 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 = '
\ 
'+title+'
 \ 
'+body+'
 \ \
 ' // (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) >

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

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

Резюме

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник