Как изменить текст в div через js

Изменение документа

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

Пример: показать сообщение

Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .

Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

Создание элемента

DOM-узел можно создать двумя методами:

Создаёт новый элемент с заданным тегом:

Создаёт новый текстовый узел с заданным текстом:

Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём:

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

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

Для этого есть метод append , в нашем случае: document.body.append(div) .

Вот полный пример:

Вот методы для различных вариантов вставки:

• node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
• node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
• node.before(. nodes or strings) –- вставляет узлы или строки до node ,
• node.after(. nodes or strings) –- вставляет узлы или строки после node ,
• node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

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

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

• "beforebegin" – вставить html непосредственно перед elem ,
• "afterbegin" – вставить html в начало elem ,
• "beforeend" – вставить html в конец elem ,
• "afterend" – вставить html непосредственно после elem .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

Так мы можем добавлять произвольный HTML на страницу.

Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

У метода есть два брата:

• elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
• elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.

Так что, вот альтернативный вариант показа сообщения:

Удаление узлов

Для удаления узла есть методы node.remove() .

Например, сделаем так, чтобы наше сообщение удалялось через секунду:

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Все методы вставки автоматически удаляют узлы со старых мест.

Например, давайте поменяем местами элементы:

Клонирование узлов: cloneNode

Как вставить ещё одно подобное сообщение?

Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

• Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

Пример копирования сообщения:

DocumentFragment

DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Например, getListContent ниже генерирует фрагмент с элементами <li> , которые позже вставляются в <ul> :

Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:

DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.

Устаревшие методы вставки/удаления

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

Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет node в конец дочерних элементов parentElem .

Следующий пример добавляет новый <li> в конец <ol> :

Вставляет node перед nextSibling в parentElem .

Следующий пример вставляет новый элемент перед вторым <li> :

Чтобы вставить newLi в начало, мы можем сделать вот так:

Заменяет oldChild на node среди дочерних элементов parentElem .

Удаляет node из parentElem (предполагается, что он родитель node ).

Этот пример удалит первый <li> из <ol> :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

Если вызвать его позже, то существующее содержимое документа затрётся.

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

Итого

Методы для создания узлов:

• document.createElement(tag) – создаёт элемент с заданным тегом,
• document.createTextNode(value) – создаёт текстовый узел (редко используется),
• elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.

Вставка и удаление:

• node.append(. nodes or strings) – вставляет в node в конец,
• node.prepend(. nodes or strings) – вставляет в node в начало,
• node.before(. nodes or strings) – вставляет прямо перед node ,
• node.after(. nodes or strings) – вставляет сразу после node ,
• node.replaceWith(. nodes or strings) – заменяет node .
• node.remove() – удаляет node .

• parent.appendChild(node)
• parent.insertBefore(node, nextSibling)
• parent.removeChild(node)
• parent.replaceChild(newElem, node)

Все эти методы возвращают node .

Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :

• "beforebegin" – вставляет html прямо перед elem ,
• "afterbegin" – вставляет html в elem в начало,
• "beforeend" – вставляет html в elem в конец,
• "afterend" – вставляет html сразу после elem .

Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

Чтобы добавить HTML на страницу до завершения её загрузки:

• document.write(html)

После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.

Change the Text of a Div Using Javascript

The div elements are non-interactive by nature. Javascript infuses life into it by making it interactive. We may need to reword the text displayed by a div . For instance, while implementing an Edit functionality, we may reuse the screens designed for developing the Add feature. Just the wordings need to be changed. As for the Add functionality, we may need to reword the Add keyword of a button to Update and so forth. Let us look at a few ways in which we can change the text of a div dynamically.

Change div Text Using the innerHTML Attribute

Unlike other programming languages, we do not use getter and setter methods to set a text to HTML elements. The HTML element object for a div has an attribute called the innerHTML . We can use it to get and set the content of the HTML object. Here the HTML object will be live. That is, it reflects any change to the element property in the browser on refresh.

Following is the syntax for using the innerHTML.

• Usage:

• getElementById() : This function of the document interface is used to select an element from the DOM using its id , specified in the HTML. The function returns the HTML object corresponsing to the selected element.
• getElementsByClassName : We can query for element based on the css class name with the getElementsByClassName function. More than one elements are returned as an array of HTML objects by this javascript method.
• getElementsByName : There is another way to select the elements with the name attribute. We specify the name attribute for the node in HTML. This method returns an array of HTML objects. We can use it, especially if we are interested in selecting multiple elements with a specific style, CSS class and acting upon them all in one go.
• getElementsByTagName : We can also select element based on their HTML tags using the getElementsByTagName() function. For instance, we can perform some operations on all the div elements in a section of DOM etc. As the name suggests, the function returns an array of HTML objects.
• querySelector : Javascript querySelector function is a bit more generic and can be used to select HTML elements with the css query . The function returns the first element that satisfies the condition passed in its parameter.
• querySelectorAll : This one is similar to the querySelector , with the only difference that it will return more than one element that satisfies the css query format passed as a parameter to it.

Change the Contents of a Div With textContent Node Attribute

Even though we use the innerHTML quite often, there is a security risk involved in using it. It is related to how the innerHTML replaces the content of the HTML element. The innerHTML attribute removes all the sub HTML nodes in a single shot and adds the new content as assigned in it.

The security risk comes as the innerHTML attribute allows us to insert any piece of HTML code, even if it is a harmful code. We will discuss this aspect in the next section. MDN recommends using node.textContent for changing the text of an element. It replaces the child nodes inside the HTML with the text we assign in the textContent parameter. Refer to the following code to understand the usage.

Please enable JavaScript

Here, we select the HTML element, div , before changing the text. We use the getElementById() function to query the element from the DOM. We then use the textContent to change the text of the div . This change will not be distinguished when the screen loads. As soon as the browser loads the webpage, the window.onload function gets executed, and the text change will happen. So the end-user sees the newer text always. The change of the old text to new is not evident on screen load. We can also play around with the textContent inside the setTimeOut method to see the change.

Inner HTML Versus textcontent Security Aspect

The innerHTML attribute differs from the textContent . Both the attributes take text as input but, what is the security vulnerability here? In the innerHTML , it is possible to add malicious code. Refer to the following code snippet. Here, the change reflects, and the innerHTML code will get executed. As shown in the following code snippet, on clicking the light green HTML div element, an undesirable alert pops up on the screen.

If we assign the same content in textContent for the div element, it will not render it as an HTML element. Javascript renders the content as text on the screen. So we can literally see the <div style=»height: 20px; background: lightgreen» onclick=»alert(‘Danger. ‘)»> displayed as text in the webpage. This aspect makes code more secure and reliable. Hence, if we intend to change the text of an HTML element, the Javascript best practices (as supported by MDN) recommend using textContent instead of innerHTML attribute.

Change the div Text Using the :after Pseudo Element

If the text change is trivial, we can use CSS to alter the div text. We use the :after pseudo HTML element, wherein we add the text that we wish to display in the content attribute. It does not apply to HTML elements like <img> where the browser replace the content with the loaded image. The following code details the usage.

Как изменять текст в блоке div через Javascript?

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

Так же на codepen ссылка

Есть идеи, как это можно сделать?

• Вопрос задан 25 мая 2022
• 1397 просмотров

• Facebook
• Вконтакте
• Twitter

Динамически текст можно менять обращаясь из JS к id элемента, для этого в любом div элементе, в котором вы хотите менять динамически текст, вы должны присвоить id блоку.
Было:

Я присвоил элементу таблицы id «galaxys10price», в JS теперь я могу оперировать с ним.
Я написал простенькие функции по изменению цены по нажатию кнопок
Код кнопок:

После добавления функционала, вы должны в onClick кнопок прописать выполнения этих функции:

How do I replace text inside a div element?

I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.

Here’s what the function will look like:

14 Answers 14

You can simply use:

Updated for everyone reading this in 2013 and later:

This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box.

The advantages of doing it this way:

1. It only uses the DOM, so the technique is portable to other languages, and doesn’t rely on the non-standard innerHTML
2. fieldName might contain HTML, which could be an attempted XSS attack. If we know it’s just text, we should be creating a text node, instead of having the browser parse it for HTML

If I were going to use a javascript library, I’d use jQuery, and do this:

Note that @AnthonyWJones’ comment is correct: «field_name» isn’t a particularly descriptive id or variable name.

I would use Prototype’s update method which supports plain text, an HTML snippet or any JavaScript object that defines a toString method.

One of the nifty features of Prototype is that $(‘field_name’) does the same thing as document.getElementById(‘field_name’) . Use it! 🙂

John Topley’s answer using Prototype’s update function is another good solution.

The quick answer is to use innerHTML (or prototype’s update method which pretty much the same thing). The problem with innerHTML is you need to escape the content being assigned. Depending on your targets you will need to do that with other code OR

(Actually of FF have the following present in by code)

Now I can just use innerText if you need widest possible browser support then this is not a complete solution but neither is using innerHTML in the raw.