jQuery.after()方法沒有換行

我正在使用 jQuery方法在單擊的單選按鈕之后.after添加一個單選按鈕和標簽。 我正在改變這個：fieldset
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>

使用這個 JS 腳本：

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

它添加了新標簽并完美輸入，但沒有 HTML 中的新行，如此處所示（在第一個單選按鈕之后添加）：

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

我如何使用該.after()方法，以便每次添加都會創建一個新行？我需要解決這個問題的原因是因為添加到同一行會導致新文本不像其他文本那樣縮進：

uj5u.com熱心網友回復：

導致布局不同的不僅僅是“換行符”，而是瀏覽器呈現所有連續的空白- 因此您需要（正確）使用 css 設定元素的樣式，或者您可以在標簽之前添加一個空格。

在您的代碼中，這將是：

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

注意：如果您使用的是<label for（您是），則for=需要與 an 匹配，id=以便您可以單擊標簽。另一種方法是將收音機嵌套在標簽中。

更新片段：

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>

標籤：javascript html jQuery

上一篇：如果DIV值根據ActionResult值更改，則停止計時器

下一篇：當滑塊改變和初始條件時如何獲取當前資料滑塊？