Как добавить новый тег после другого тега внутри тега?

Можно воспользоваться методом .insertAdjacentElement

var ptag = document.getElementById('idName'); 
 
var newhr = document.createElement('hr'); 
ptag.insertAdjacentElement('afterend', newhr);

<article> 
  <p id="idName">Paragraph</p> 
</article>

Так же можно воспользоваться тем же .insertBefore, передавая вторым параметром не текущий элемент, а следующий

var ptag = document.getElementById('idName'); 
 
var newhr = document.createElement('hr'); 
ptag.parentNode.insertBefore(newhr, ptag.nextElementSibling);

<article> 
  <p>Paragraph</p> 
  <p id="idName">Paragraph idName</p> 
  <p>Paragraph</p> 
  <p>Paragraph</p> 
</article>

Для случая нескольких p

for (var ptag of document.getElementsByTagName('p')) { 
  var newhr = document.createElement('hr'); 
  ptag.insertAdjacentElement('afterend', newhr); 
}

<article> 
  <p>Paragraph</p> 
  <p>Paragraph</p> 
  <p>Paragraph</p> 
  <p>Paragraph</p> 
  <p>Paragraph</p> 
  <p>Paragraph</p> 
</article>

К сожалению нету ничего такого как insertAfter, поэтрому нужно комбинировать, и как один из вариантов:

var getChildIndex = function(child) {
  var parent = child.parentNode;
  for (var i = 0; i !== parent.children.length; i++) {
    if (parent.children[i] === child) {
      return i;
    }
  }
};
var insertAfter = function(el) {
  var ind = getChildIndex(el);
  var hr = document.createElement('hr');
  if (ind === el.parentNode.children.length - 1) {
    el.parentNode.appendChild(hr);
  } else {
    el.parentNode.insertBefore(hr, el.parentNode.children[ind + 1]);
  }
};
var artic = document.getElementsByTagName('article');
var ptag = artic[0].querySelectorAll('p');
for (var i = 0; i !== ptag.length; i++) {
  insertAfter(ptag[i]);
}