jQuery .after() method not making new line-CodePudding

I am using the jQuery .after method to add a radio button and label to a fieldset after the radio button that is clicked.
I am altering this fieldset:

<fieldset>
  <legend>Choose a color:</legend>
  <input type="radio" value="firstChoice" name="colorChoice">
  <label for="firstChoice">red<br></label>
  <input type="radio" value="secondChoice" name="colorChoice">
  <label for="secondChoice">yellow<br></label>
  <input type="radio" value="thirdChoice" name="colorChoice">
  <label for="thirdChoice">orange<br></label>
  <input type="radio" value="fourthChoice" name="colorChoice">
  <label for="fourthChoice">green<br></label>
  <input type="radio" value="fifthChoice" name="colorChoice">
  <label for="fifthChoice">blue<br></label>
  <input type="radio" value="sixthChoice" name="colorChoice">
  <label for="sixthChoice">rebeccapurple<br></label>
</fieldset>

Using this JS script:

const radios = querySelectorAll("input");

const lineBreak = document.createElement("br");
const newRadio = document.createElement("input");
newRadio.type = "radio";
newRadio.value = "blackAddition";
newRadio.name = "colorChoice";
const newLabel = document.createElement("label");
newLabel.htmlFor = "blackAddition";
const newColour = document.createTextNode("black");
newLabel.appendChild(newColour);
newLabel.appendChild(lineBreak);

radios.forEach(radio => {
  radio.addEventListener("click", function addRadio() {
    radio.nextElementSibling.after(newLabel);
    radio.nextElementSibling.after(newRadio);
  });
});

It adds the new label and input perfectly fine but without the new lines in the HTML as seen here (adding it after the first radio button):

<fieldset>
  <legend>Choose a color:</legend>
  <input type="radio" value="firstChoice" name="colorChoice">
  <label for="firstChoice">red<br></label><input type="radio" value="blackAddition" name="colorChoice"><label for="blackAddition">black<br></label>
  <input type="radio" value="secondChoice" name="colorChoice">
  <label for="secondChoice">yellow<br></label>
  <input type="radio" value="thirdChoice" name="colorChoice">
  <label for="thirdChoice">orange<br></label>
  <input type="radio" value="fourthChoice" name="colorChoice">
  <label for="fourthChoice">green<br></label>
  <input type="radio" value="fifthChoice" name="colorChoice">
  <label for="fifthChoice">blue<br></label>
  <input type="radio" value="sixthChoice" name="colorChoice">
  <label for="sixthChoice">rebeccapurple<br></label>
</fieldset>

How do I use the .after() method so that it will make a new line for every addition? The reason I need to solve this is because adding to the same line causes the new text to not be indented like the others as it should be:

CodePudding user response：

It's not just that it's a "newline" that's causing the layout different, it's that the browser renders all contiguous whitespace - so you need to either (correctly) style your elements with css or you can add a space before your label.

In your code this would be:

radio.nextElementSibling.after(document.createTextNode(" "));

Note: if you're using a <label for (which you are) then the for= needs to match with an id= so you can click on the label. The alternative is to nest the radio in the label.

Updated snippet:

const radios = document.querySelectorAll("input");

const lineBreak = document.createElement("br");
const newRadio = document.createElement("input");
newRadio.type = "radio";
newRadio.value = "blackAddition";
newRadio.id = "blackAddition";
newRadio.name = "colorChoice";
const newLabel = document.createElement("label");
newLabel.htmlFor = "blackAddition";
const newColour = document.createTextNode("black");
newLabel.appendChild(newColour);
newLabel.appendChild(lineBreak);

radios.forEach(radio => {
  radio.addEventListener("click", function addRadio() {
    radio.nextElementSibling.after(newLabel);
    radio.nextElementSibling.after(document.createTextNode(" "));
    radio.nextElementSibling.after(newRadio);
  });
});

<fieldset>
  <legend>Choose a color:</legend>
  <input type="radio" value="firstChoice" id="firstChoice" name="colorChoice">
  <label for="firstChoice">red<br></label>
  <input type="radio" value="secondChoice" id="secondChoice" name="colorChoice">
  <label for="secondChoice">yellow<br></label>
  <input type="radio" value="thirdChoice" id="thirdChoice" name="colorChoice">
  <label for="thirdChoice">orange<br></label>
</fieldset>