如何在按钮之间换行[重复]答案

【问题标题】：How to give a line break between buttons [duplicate]如何在按钮之间换行[重复]
【发布时间】：2018-09-09 20:41:32
【问题描述】：

如何在 javascript 中的按钮之间添加换行符？我要打断标签位于按钮元素之外。

html:

<button id="buttonOne"> click one me </button>
<button id="buttonTwo"> click on me too </button>

js:

var buttonOne = document.getElementById("buttonOne");
var lineBreak = document.createElement("br");
buttonOne.appendChild(lineBreak);

给予：

<button id="buttonOne"> click one me <br> </button>
<button id="buttonTwo"> click on me too </button>

我想要的是：

<button id="buttonOne"> click one me </button> 
<br>
<button id="buttonTwo"> click on me too </button>

【问题讨论】：

你为什么不直接使用 CSS 呢？ display: block 不需要 br 和 JavaScript。

标签： javascript html

【解决方案1】：

var buttonOne = document.getElementById("buttonOne");
var lineBreak = document.createElement("br");
buttonOne.parentNode.insertBefore(lineBreak, buttonOne.nextSibling);

<button id="buttonOne"> click one me </button>
<button id="buttonTwo"> click on me too </button>

试试：

var buttonOne = document.getElementById("buttonOne");
var lineBreak = document.createElement("br");
buttonOne.parentNode.insertBefore(lineBreak, buttonOne.nextSibling);

【讨论】：

【解决方案2】：

after() 应该这样做：

var buttonOne = document.getElementById("buttonOne");
var lineBreak = document.createElement("br");
buttonOne.after(lineBreak);

<button id="buttonOne"> click one me </button>
<button id="buttonTwo"> click on me too </button>

【讨论】：