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

Question

Допустим, у меня есть условная шапка сайта:

<div class="parent">
  <div class="children">Наша компания</div>
  <div class="children">Вакансии</div>
  <div class="children">Наша почта</div>
</div>

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

<div class="parent">
  <div class="children">Мы</div>
  <div class="children">Работа</div>
  <div class="children">Контакты</div>
</div>

Как мне это сделать, используя JS?

Answer 1

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

HTML

    <div id="global-alert-queue" class="layout-wrapper">
    <div class="alert success animate-in" role="alert">
        Your submission was successful.
        <button id="dismiss-alert" class="dismiss" type="button" onClick="changeText()">Change</button>
    </div>
</div>

JS

    function changeText() {
    document.getElementsByClassName("animate-in")[0].firstChild.nodeValue = "Change Text";
}

Источник: https://stackoverflow.com/questions/30860282/javascript-modify-the-text-inside-the-div-class

Вариант с Jquery:

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

Вариант с CSS:

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

<div class="parent">
  <div class="children">Наша компания</div>
  <div class="children">Вакансии</div>
  <div class="children">Наша почта</div>
</div>

<div class="mobile">
  <div class="children">Мы</div>
  <div class="children">Работа</div>
  <div class="children">Контакты</div>
</div>

@media (max-width: 768px) {
 .mobile {
  display: none;
 }
}

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

БЛОГ НА HUSL

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

Ответы (1 шт):