Чаще всего причина в не в самой теге <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 (или ссылку), посмотрю конкретно и подскажу исправление.