如何在所有标题元素后添加<br/>标签？

Question

我有以下HTML：

<h1>Intro</h1>
<p>Some text</p>
<h2>Main part</h2>
<p>Some text</p>

我需要在每个标题后添加<br>元素。

预期产出：

<h1>Intro</h1>
<br>
<p>Some text</p>
<h2>Main part</h2>
<br>
<p>Some text</p>

我该怎么办？

Answer 1

JavaScript中没有Node.insertAfter() DOM函数。但您可以编写自己的函数，如下所示：

Object.prototype.insertAfter = function (newNode) { 
  this.parentNode.insertBefore(newNode, this.nextSibling); 
}

var header = document.querySelectorAll('h1,h2');
header.forEach(function(h){
  var elBR = document.createElement('br');
  h.insertAfter(elBR);
});

<h1>Intro</h1>
<p>Some text</p>
<h2>Main part</h2>
<p>Some text</p>

Answer 2

  

br元素必须仅用于实际上是内容的换行符，如诗歌或地址。 - w3

您不应将<br>标记用于此目的。而是使用CSS margin-bottom属性。

<h1>Intro</h1>
<p>Some text</p>
<h2>Main part</h2>
<p>Some text</p>

使用CSS

h1,
h2 {
  margin-bottom: 30px;
}

使用Javscript

var headers = document.querySelectorAll('h1,h2');

headers.forEach(function(header){
  header.style.marginBottom = '30px'
});