How to give a line break between buttons

Question

How to add line breaks between buttons in javascript? I want break tag to be outside of the button elements.

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);

gives:

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

what I want is:

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

Why don't you just use CSS? `display: block` Than there is no need for the br and for JavaScript. — epascarello, Mar 30 '18 at 20:02

score 1 · Accepted Answer · answered Mar 30 '18 at 19:59

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>

Try:

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

score 0 · Answer 2 · answered Mar 30 '18 at 19:59

0

after() should do it:

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>

answered Mar 30 '18 at 19:59

j08691

204,283
31
260
272

How to give a line break between buttons

2 Answers2