Почему при попытке добавить элементы <p> они не появляются на странице?

<pre><code class="html">&lt;!DOCTYPE html&gt;
  • 1 мая 2026 г. 15:01
Ответы на вопрос 2
Чаще всего причина в не в самой теге <p>, а в том, где/как вы его вставляете или какие стили/скрипты его скрывают. Ниже — краткий чеклист и типичные ошибки с решениями. Если пришлёте ваш код — скажу точную причину.

1) Тег оказался вне <body>
- Ошибка: вы добавили <p> в <head> или в неправильное место HTML.
- Решение: поместите содержимое в <body> или добавляйте в существующий контейнер в body.

2) Скрипт выполняется до загрузки DOM
- Симптом: код создаёт элемент, но appendChild падает, потому что родитель ещё не существует.
- Решение: запускать код после DOMContentLoaded или поместить <script> перед закрывающим </body>.
Пример:
window.addEventListener('DOMContentLoaded', () => {
  const p = document.createElement('p');
  p.textContent = 'Текст';
  document.body.appendChild(p);
});

3) CSS скрывает элемент
- Возможные правила: display: none; visibility: hidden; opacity: 0; color совпадает с фоном; font-size: 0; позиция за пределами экрана; z-index ниже перекрывающего слоя.
- Решение: в инспекторе DevTools посмотрите вкладку Computed/Styles. Попробуйте временно добавить стиль, чтобы проверить видимость:
p { background: yellow; border: 1px solid red; }

4) Элемент есть в DOM, но пустой
- Если <p></p> без текста, он может быть невидим (особенно при нулевой высоте).
- Решение: добавьте текст или контент: p.textContent = 'Привет';

5) Неправильное добавление через JS
- Ошибки: appendChild('строка') — так нельзя (нужен узел); использование неправильного селектора document.getElementById('id') возвращает null.
- Правильно:
const p = document.createElement('p');
p.textContent = 'Текст';
document.getElementById('container').appendChild(p);

6) Вложение в запрещённые контейнеры
- Например, вставка <p> напрямую в <table> или внутри <ul>/<ol> может быть перемещена браузером или не отобразиться как ожидаете.
- Решение: вставляйте в корректные контейнеры или используйте допустимые теги (например <td> внутри таблицы).

7) JavaScript-ошибки прерывают исполнение
- Если ранее в скрипте ошибка, последующие строки не выполняются.
- Решение: откройте консоль DevTools и проверьте ошибки.

Как быстро проверить:
- Откройте DevTools → Elements: ищите <p>. Если он есть — проблема со стилями. Если нет — проблема с добавлением/скриптом.
- Откройте Console: есть ли ошибки?
- Вставьте временно явно в HTML: <p style="background:yellow">Тест</p> — если виден, значит проблема с добавлением/скриптом/стилем.

Если хотите — прикрепите ваш HTML/JS (или ссылку), посмотрю конкретно и подскажу исправление.
`querySelectorAll` возвращает NodeList — это объект, он всегда truthy, даже пустой. поэтому `if(P)` никогда не идёт в else. <br/> <br/> перепиши так: <br/> <br/> <pre><code>button.onclick = function(e) {
    e.preventDefault();
    newDiv.querySelectorAll('p').forEach(p =&gt; p.remove());
    inputs.forEach(input =&gt; {
        let p = document.createElement('p');
        p.textContent = input.value;
        newDiv.append(p);
    });
}</code></pre>
Похожие вопросы