title: appendChild with for loop and if i%3 ==0 I want to add a <br> after that number's input
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let buttonArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  for (let i of buttonArr) {
    let numberButton = document.createElement("input");
    numberButton.type = "button";
    numberButton.value = i;
    document.body.appendChild(numberButton);
  
  
    if (i % 3 == 0) {
      let breakMark = document.createElement("br");
      document.body.appendChild("breakMark");
    } else {
      console.log(i);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to use <code>appendChild()</code> in JavaScript with for loop to add input tag to HTML base on the length of Array. I want only three button shows in one line, which is means after three new input tag been added to HTML I want to add a <br> element. My idea is if <code>i%3 == 0</code> then <code>appendChild()</code> <code>&lt;br&gt;</code> to HTML but it looks wrong. </p>
  
  <p>Any help is greatly appreciated.</p>