尝试制作表格但在创建新条目时无法自动换行

Question

在我的 JavaScript 函数的最后一部分中，element.appendChild 不能正常工作以在每个文本输入后插入一个 <br> 元素。文本输入改为内联显示，而不是像三个现有输入那样在新行上显示。

<div id='reference'>
        <input id='company' type=text name='refer[]' placeholder='Company Name' size=40 /><br>
        <input id='company' type=text name='refer[]' placeholder='Who to Contact' size=40 /><br>
        <input id='company' type=text name='refer[]' placeholder='Contact Information' size=40 /><br>
    </div><br>
    <input type=button value="Add New Reference" onClick=" 
  element=document.getElementById('reference');
  newLine=document.createElement('br');
  newInput=document.createElement('input');
  newInput.placeholder='Company Name';
  newInput.size=40;
  newInput.id=company;
  newInput.name='refer[]';
  newInput.type='text';
  newInput1=document.createElement('input');
  newInput1.placeholder='Who to Contact';
  newInput1.size=40;
  newInput1.id=company;
  newInput1.name='refer[]';
  newInput1.type='text';
    
  newInput2=document.createElement('input');
  newInput2.placeholder='Contact Information';
  newInput2.size=40;
  newInput2.id=company;
  newInput2.name='refer[]';
  newInput2.type='text';
    
  element.appendChild(newInput);element.appendChild(newLine);
  element.appendChild(newInput1); 
  element.appendChild(newInput2);
    "/>

Answer 1

问题是您正在使用 newLine = document.createElement('br'); 创建对单个 <br> 元素的单个引用，您需要为每个元素创建一个单独的引用，或者克隆您创建的那个，甚至更简单的方法是将 element.appendChild( document.createElement('br') ); 粘贴到您想要新行的位置。此代码段应该适合您

function customFunction(){
  element=document.getElementById('reference');
  newInput=document.createElement('input');
  newInput.placeholder='Company Name';
  newInput.size=40;
  newInput.id=company;
  newInput.name='refer[]';
  newInput.type='text';

  newInput1=document.createElement('input');
  newInput1.placeholder='Who to Contact';
  newInput1.size=40;
  newInput1.id=company;
  newInput1.name='refer[]';
  newInput1.type='text';

  newInput2=document.createElement('input');
  newInput2.placeholder='Contact Information';
  newInput2.size=40;
  newInput2.id=company;
  newInput2.name='refer[]';
  newInput2.type='text';

  element.appendChild(newInput);
  element.appendChild( document.createElement('br') );
  element.appendChild(newInput1);
  element.appendChild( document.createElement('br') );
  element.appendChild(newInput2);
  element.appendChild( document.createElement('br') );
}

<div id='reference'>
  <input id='company' type=text name='refer[]' placeholder='Company Name' size=40 /><br>
  <input id='company' type=text name='refer[]' placeholder='Who to Contact' size=40 /><br>
  <input id='company' type=text name='refer[]' placeholder='Contact Information' size=40 /><br>
</div>
<input type=button value="Add New Reference" onClick="customFunction()"/>

就是说，稍微编辑一下表单标记、克隆整个 reference div 并将其附加到字段容器 div 不是更容易吗？

function customFunction(){
  fields = document.getElementById('fields');
  clone  = document.getElementById('reference').innerHTML;
  row    = document.createElement('div');
  
  row.innerHTML = clone;
  
  fields.appendChild( row );
}

<form id="myform">
  <div id="fields">
    <div id="reference">
      <input id="company" type="text" name="refer[]" placeholder="Company Name" size="40" /><br>
      <input id="company" type="text" name="refer[]" placeholder="Who to Contact" size="40" /><br>
      <input id="company" type="text" name="refer[]" placeholder="Contact Information" size="40" /><br>
    </div>
  </div>
  <input type="button" value="Add New Reference" onClick="customFunction()" />
</form>

尝试制作表格但在创建新条目时无法自动换行

Triying to make a form but not able to make a new line automatically when creating a new entry

html

javascript

css

forms

visual-web-developer