<br> 标签不适用于 AppendChild() 并显示：flex

Question

我正在制作一个待办事项列表程序，在每个复选框之后，应该有一个新行。但是 br 函数不起作用，我认为它与 CSS 文本有关，其中代码是 display: flex。看看：（Javascript）

document.addEventListener('DOMContentLoaded', () => {
  const textareaEle = document.getElementById('j');
  textareaEle.addEventListener('input', () => {
    textareaEle.style.height = 'auto';
    textareaEle.style.height = `${textareaEle.scrollHeight}px`;
  });
  function myFunction(){
    const dif         = document.getElementById("dif");
    const div         = document.getElementById("copy");
    const sauce       = document.getElementById("sauce")
    const textareaEle = document.getElementById('j');
    let checkbox      = document.createElement("input");
    let paragraph     = document.createElement("p");
    let konq          = document.createTextNode(textareaEle.value);
    let line          = document.createElement("br");
    
    checkbox.setAttribute("type", "checkbox", "class", "checkbox");
    paragraph.setAttribute("class", "checkbox");
    
    paragraph.appendChild(konq);
    sauce.appendChild(checkbox);
    sauce.appendChild(paragraph);
    sauce.appendChild(line);
  }

CSS

#sauce{
  display: flex;
}

Answer 1

首先，你的问题不完整。您应该更清楚地描述您正在尝试做什么。此外，您必须包含代码的 HTML 部分。

但是，在分析您的 JS 代码后，我假设您尝试在有人单击按钮时使用

id

“sauce”将任务元素添加到 div 中。尽管您没有在代码中提到任何类型的按钮单击，但您没有在任何地方使用

myFunction

。所以我假设它会在单击按钮后触发。

现在看这里的代码：

document.addEventListener('DOMContentLoaded', () => {
  const textareaEle = document.getElementById('j');
  
  textareaEle.addEventListener('input', () => {
    textareaEle.style.height = 'auto';
    textareaEle.style.height = `${textareaEle.scrollHeight}px`;
  });
  
  function myFunction() {
    const dif = document.getElementById("dif");
    const div = document.getElementById("copy");
    const sauce = document.getElementById("sauce");
    const textareaEle = document.getElementById('j');
    
    let checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.classList.add("checkbox");
    
    let paragraph = document.createElement("p");
    paragraph.classList.add("checkbox");
    
    let konq = document.createTextNode(textareaEle.value);
    let line = document.createElement("br");
    
    paragraph.appendChild(konq);
    sauce.appendChild(checkbox);
    sauce.appendChild(paragraph);
    sauce.appendChild(line);
  }
  
  const addTaskBtn = document.getElementById('addTask');
  if (addTaskBtn) {
    addTaskBtn.addEventListener('click', myFunction);
  }
});

#sauce{
  display: flex;
}

<div id="dif"></div>
<div id="copy"></div>
<div id="sauce"></div>
<textarea id="j"></textarea>
<button id="addTask">Add Elements</button>

因此，您将元素单独推入 #sauce div 内，在脚本执行

myFunction

后，实际上看起来像这样。

#sauce {
  display: flex;
}

<div id="sauce">
  <input type="checkbox" class="checkbox">
  <p class="checkbox">First task</p>
  <br>
  <input type="checkbox" class="checkbox">
  <p class="checkbox">Second task</p>
  <br>
  <input type="checkbox" class="checkbox">
  <p class="checkbox">Third task</p>
  <br>
 </div>

所以在这里，

<br>

元素作为弯曲 div 的直接子元素插入。所以

<br>

元素是 div 的直接成员。这就是为什么它不起作用。

要实现此目的，您应该稍微更改脚本和 CSS，以便每个任务都会换行。

document.addEventListener('DOMContentLoaded', () => {
  const textareaEle = document.getElementById('j');
  
  textareaEle.addEventListener('input', () => {
    textareaEle.style.height = 'auto';
    textareaEle.style.height = `${textareaEle.scrollHeight}px`;
  });
  
  window.myFunction = function() {
    const dif = document.getElementById("dif");
    const div = document.getElementById("copy");
    const sauce = document.getElementById("sauce");
    const textareaEle = document.getElementById('j');
    
    let checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.classList.add("checkbox");
    
    let paragraph = document.createElement("p");
    paragraph.classList.add("checkbox");
    
    let konq = document.createTextNode(textareaEle.value);
    let line = document.createElement("br");
    
    let sauceItem = document.createElement("div")
    sauceItem.classList.add("sauce-item")
    
    paragraph.appendChild(konq);
    sauceItem.appendChild(checkbox);
    sauceItem.appendChild(paragraph);
    sauceItem.appendChild(line);
    
    sauce.appendChild(sauceItem)
  }
});

#sauce{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.sauce-item {
  display: flex;
}

<div id="dif"></div>
<div id="copy"></div>
<div id="sauce"></div>
<textarea id="j"></textarea>
<button id="addTask" onclick="myFunction()">Add Elements</button>

在这个新片段中，您甚至不需要

<br>

元素。