Как редактировать html через JavaScript

Question

Такой странный вопрос, к примеру имеется данный готовый html. К которому у меня нет доступа.

<body>
  <div class="blockAll">
    <div class="block1">
     <p>Блок 1</P>
    </div>
    <div class="block2">
       <p>Блок 2</P>
    </div>
  </div>
</body>

Могу ли я с помощью JavaScript изменить структуру, к примеру, добавить новый блок к class="blockAll" и т.д.?

Answer 1

Добавить HTML с помощью javaScript можно.

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

document.addEventListener('DOMContentLoaded', () => {
  const div = document.createElement('div');
  div.innerHTML = '<p>Блок 3</P>';
  div.classList.add('block3');
  document.querySelector('.blockAll').appendChild(div);
})

<div class="blockAll">
  <div class="block1">
    <p>Блок 1</P>
  </div>
  <div class="block2">
    <p>Блок 2</P>
  </div>
</div>

Добавление HTML по нажатию на кнопку:

let i = 1;
const block = document.querySelector('.blockAll');

document.getElementById('btn').addEventListener('click', () => {
  const div = document.createElement('div');
  div.innerHTML = `<p>Блок ${i}</P>`;
  div.classList.add(`block${i}`);
  block.appendChild(div);
  i++;
})

<div class="blockAll"></div>
<button id="btn">Добавить</button>

БЛОГ НА HUSL

Как редактировать html через JavaScript

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