Как заменить текст в html с помощью js
Перейти к содержимому

Как заменить текст в html с помощью js

  • автор:

Как заменить текст в HTML c помощью JS, обращаясь к классу элемента?

И я хочу, чтобы с помощью javascript текст при медиа запросе @media (max-width: 768px) заменялся на следующий:

 
Мы
Работа
Контакты

Как мне это сделать, используя JS?
Отслеживать
задан 19 авг 2022 в 6:07
117 10 10 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вообще это можно сделать и без js, но вариант с JS:

HTML

  
Your submission was successful.

JS

 function changeText()

Вариант с Jquery:

$('.divName').html('Замена текста внутри DIV'); 

Добавить в шапку оба ваших вариантов и скрыть одну из них:

Ну чтобы можно было скрыть один из них смотря на размер через CSS.

Отслеживать
ответ дан 19 авг 2022 в 6:54
333 1 1 серебряный знак 9 9 бронзовых знаков

Спасибо! Сделал все-таки без JS, используя CSS, так получилось проще всего) Кстати, не подскажите одну вещь: если делать то, что я спрашивал в вопросе с помощью фреймворка, то можно ли выполнить эту задачу не с помощью jquery, как Вы показывали, а с помощью React? Или эти фреймы все-таки для немного разных задач?

24 авг 2022 в 15:05

К сожалению опыта в react у меня нет, но вы можете создать отдельный «топик» с тегом react и вам обязательно помогут 🙂

Как заменить текст в тегах?

Появляется первое сообщение и остается, не меняется. Как сделать, чтобы сначала появилось ‘Привет’, а затем ‘Пока’ ?

Отслеживать
ObehanProger
задан 11 окт 2018 в 11:21
ObehanProger ObehanProger
1,400 2 2 золотых знака 14 14 серебряных знаков 35 35 бронзовых знаков
$(‘p.message’).html(‘Привет!’).delay(1000).html(‘Пока!’); кажется так можно
11 окт 2018 в 11:41
Там немного кода выполняется между сообщениями, посмотрите код.
11 окт 2018 в 11:56
Надо, что бы условие было истинно. У вас сейчас a==’true’ равно false .
11 окт 2018 в 12:01

Вот я исправил. Смысл не в том. Функция сначала выводит первое сообщение, выполняет код, затем выводит второе. А второе не выводится, а остается первое.

11 окт 2018 в 12:27
В вашем примере выводится как раз второе.
11 окт 2018 в 12:37

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вы хотели получить такой эффект?

function foo()< $('p.message').html('Привет!'); setTimeout(function()< $('p.message').html('Пока!'); >, 1000) > foo();

Отслеживать
ответ дан 11 окт 2018 в 13:31
1,567 1 1 золотой знак 8 8 серебряных знаков 14 14 бронзовых знаков

В примере ниже примется во внимание только последняя строчка кода: box.style.display = «block»; Это произойдет потому, что в начале выполняется основной поток (весь твой js ), а когда полностью весь он выполниться, то тогда наступает очередь рендеринга — обновление картинки до состояния актуальной. В него входить вычисление Style Calculation , Layout , Paint еще входит Request Animation Frame , и он вроде первый идет по списку, но это другая история. Так вот в момент подготовки кадра уже учитываеться конечный результат, по этому в твоем примере в силу вступает $(‘p.message’).html(‘Пока!’); .

function style() < box.style.display = "none"; box.style.display = "block"; box.style.display = "none"; box.style.display = "block"; box.style.display = "none"; box.style.display = "block"; box.style.display = "none"; box.style.display = "block"; >style();

Можно сделать с помощью setTimeout .

let a = true; function foo() < if (a) < $('p.message').html('Привет!'); a = false; setTimeout(foo, 2000); >else < $('p.message').html('Пока!') >> foo();

Если хотите лучше понять почему так происходит, то можете посмотреть хорошее видео про Event Loop.

Меняем текстовое содержимое элемента

Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.

Возьмём абзац с текстом:

Здесь могла быть ваша реклама.

И перезапишем его текстовое содержимое:

let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';

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

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

Здесь был Кекс. Мяу!

Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.

Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  • script.js Сплит-режим

FlashNews!

На главную

email

Новая библиотека для создания графиков

Теперь вы можете создать дашборд за считанные секунды.

Что там у роботов?

В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.


JavaScript

let page = document.querySelector(‘.page’); let themeButton = document.querySelector(‘.theme-button’); themeButton.onclick = function() < page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); >; let message = document.querySelector(‘.subscription-message’);

Показать ответ

Спасибо! Мы скоро всё исправим)

Заменить текст с помощью JS

Старался следовать условиям вопроса буквально. Так-то конечно незачем, потому что все пробельные символы будут нормализованы.

12 июл 2020 в 18:59

@vsemozhetbyt спасибо, но не совсем то. Наверное моя вина, что не конкретизировал. Нужно заменить конкретно «Первое слово» на «Второе слово». В этом блоке может быть и «Третье слово», но его трогать не нужно) Как быть?

12 июл 2020 в 19:04

Тогда можно, как в последней редакции ответа.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *