Я хочу использовать javascript для добавления часов внутрь div. Вот мой код:
Но это не сработает. Помогите мне это исправить. Благодарю вас.
Демо здесь
innerHTML может записывать текст в div, поскольку вы не добавляете какой-либо элемент здесь.
Если вы действительно хотите использовать appendChild, лучше используйте createElement, а затем добавьте его в div.
На этом уроке мы рассмотрим, как вывести текст в JavaScript на экран, с двумя разными целями: заменить на другой и добавить к существующему.
Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.
Заменить текст в JavaScript
Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.
Для получения параграфа для работы:
Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.
Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо «Заменить текст», выведем внутри p новую запись:
p.innerHTML = ‘Текст заменили’;
После клика по кнопке, замена произошла успешно.
Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.
Что будет, если кавычки оставить пустыми?
Тогда параграф очистится, текущая запись удалится, а новая не вставится.
Добавить текст в JavaScript
Как добавить новый текст к уже существующему, не удаляя текущий?
p.innerHTML += ‘ на сайте‘;
Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.
Эти две записи равнозначны.
p.innerHTML = p.innerHTML + ‘на сайте’;
Берем, что имеется, прибавляем что-нибудь новое и записываем заново.
Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами , а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.
p.innerHTML += ‘ на сайте‘;
Теги выводятся, но не обрабатываются.
p.innerText += ‘ на сайте‘;
Все действия, которые мы производили до этого, приводят к тому, что запись выводится между парными тегами. Однако было бы удобно иметь возможность более гибко выводить дополнительную информацию по отношению к элементу. Такой способ есть и выглядит следующим образом.
Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:
- первый параметр – где вывести информацию
- второй параметр – это что вывести
Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.
- beforeBegin — перед открывающим тегом
- afterBegin — после открывающего тега
- beforeEnd – перед закрывающим тегом
- afterEnd – после закрывающим тегом
Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.
Присвоим параграфу «Замена» всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.
После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.
В инспекторе кода, мы увидим уже новый код, на месте старого.
Пример 1: добавим текст к существующему.
Пример 2: добавить текст перед родительским элементом
Обратите внимание
В последующих примерах для добавления текста JS в необходимое место, родителем может служить не только параграф
( я его использовал в качестве примера ), но и любой другой элемент страницы.
Источник: