Как добавить hr после каждой p?

Question

<article>
        <h3>What is Lorem Ipsum?</h3>
        <p>First</p>
        <h3>Where does it come from?</h3>
        <p>Second</p>
        <h3>Why do we use it?</h3>
        <p>Third</p>
</article>

Необходимо с помощью JavaScript вставить после каждого тега p тег hr, для визуального отделения абзацев друг от друга. Нельзя модифицировать указанную разметку, надо только написать script с кодом.

Что можно сделать? Какой использовать метод DOM?

Answer 1

Зачем здесь jquery, так то проще ;)

Pure HTML&CSS:

p{
    margin: 3px 0px; 
    border-bottom: 1px solid black;
}

<article>
    <h3>What is Lorem Ipsum?</h3>
    <p>First</p>
    <h3>Where does it come from?</h3>
    <p>Second</p>
    <h3>Why do we use it?</h3>
    <p>Third</p>
</article>

Answer 2

document.querySelectorAll('p').forEach((elem) => {
    elem.insertAdjacentHTML('afterend', '<hr/>');
});

<article>
    <h3>What is Lorem Ipsum?</h3>
    <p>First</p>
    <h3>Where does it come from?</h3>
    <p>Second</p>
    <h3>Why do we use it?</h3>
    <p>Third</p>
</article>

Answer 3

А можно использовать ещё псевдоэлемент ::after

*, *::after, *::before {
  box-sizing: border-box;
}

p::after {
  content: '';
  display: block;
  position: static;
  width: 100%;
  height: 1px;
  background-color: black;
  margin: 10px 0;
}

<article>
  <h3>What is Lorem Ipsum?</h3>
  <p>First</p>
  <h3>Where does it come from?</h3>
  <p>Second</p>
  <h3>Why do we use it?</h3>
  <p>Third</p>
</article>

БЛОГ НА HUSL

Как добавить hr после каждой p?

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