javascript css display appendchild createelement

Br tag doesn't work with AppendChild() and display: flex

I am making a to-do list program where after every checkbox, there should be a new line. But the br function doesn't work and I think it has to do with the CSS text, where the code is display: flex. Have a look:(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");
checkbox.setAttribute("type", "checkbox", "class", "checkbox");
let paragraph = document.createElement("p");
paragraph.setAttribute("class", "checkbox");
let konq = document.createTextNode(textareaEle.value);
let line = document.createElement("br");
paragraph.appendChild(konq);
sauce.appendChild(checkbox);
sauce.appendChild(paragraph);
sauce.appendChild(line);
}

CSS

#sauce{
display: flex;

}

Solution

First of all, your question is not complete. You should describe more clearly what you are trying to do. Additionally, you must include the HTML portion of your code.

However, after analyzing your JS code, I'm assuming that you are trying to add task elements into the div with id "sauce" when someone clicks on a button. Though you didn't mention any kind of button click in your code, you didn't use your myFunction anywhere. So I'm assuming it will trigger after a button click.

Now look at the code here:

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>

So you are pushing the elements inside the #sauce div individually, which actually looks like this after the script executes the 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>

So here, the <br> element inserts as a direct child of the flexed div. So the <br> element is a direct member of the div. That's why it's not working.

To make this work, you should change your script and CSS a little bit so that each task will go to a new line.

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>

In this new snippet you don't even need the <br> element.