Как вывести текст в HTML через JS

Question

HTML:

<div id="test_id">
<p>Вот сюда должен вставляться текст из javascript</p>
</div>

JS:

function showText(){
Нужно так, чтобы появлялся текст
в <p> теге.
}

Answer 1

Есть разные варианты

Если именно тег p, то так, используя querySelector

function showText() {
  // Получаем первый элемент <p> в документе
  var paragraph = document.querySelector('p');

  // Устанавливаем новый текст для <p>
  paragraph.textContent = 'Я выведен через textContent, пример 1';
}

// Вызов функции для проверки
showText();

<p>Я текст, меня не видно...</p>

если p в div-е как у вас в примере

function showText() {
  // Получаем элемент <p> внутри <div> с id="test_id"
  var paragraph = document.querySelector('#test_id p');

  // Устанавливаем новый текст для <p>
  paragraph.textContent = 'Новый текст вставлен из JavaScript';
}

// Вызов функции для проверки
showText();

<div id="test_id">
  <p>Вот сюда должен вставляться текст из javascript</p>
</div>

4 варианта предложу еще

// Пример 1: Изменение текстового содержимого
var element1 = document.querySelector('#example1');
element1.textContent = 'Я выведен через textContent, пример 1';

// Пример 2: Изменение HTML-содержимого
var element2 = document.querySelector('.example2');
element2.innerHTML = '<p><strong>Я выведен через innerHTML, пример 2</strong></p>';

// Пример 3: Добавление текста как дочернего узла
var element3 = document.querySelector('.example3');
var textNode = document.createTextNode('Я выведен через appendChild, пример 3');
element3.appendChild(textNode);

// Пример 4: Вставка текста относительно элемента
var element4 = document.querySelector('.example4');
element4.insertAdjacentText('beforebegin', 'Я выведен через insertAdjacentText, пример 4');

.example2 p {
  color: blue;
}

.example3 {
  border: 1px solid black;
  padding: 10px;
}

<!-- Пример 1: Изменение текстового содержимого -->
<div id="example1">
  Я выведен через textContent, пример 1,0
</div>

<!-- Пример 2: Изменение HTML-содержимого -->
<div class="example2">
  <p>Я выведен через innerHTML, пример 2,0</p>
</div>

<!-- Пример 3: Добавление текста как дочернего узла -->
<div class="example3">
  <!-- Я выведен через appendChild, пример 3 -->
</div>

<!-- Пример 4: Вставка текста относительно элемента -->
<div class="example4">
  <!-- Я выведен через insertAdjacentText, пример 4 -->
</div>

БЛОГ НА HUSL

Как вывести текст в HTML через JS

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