Fatal编程技术网
  • javascript/
  • Javascript 如何让append-child以单独的行而不是一行编写html？

Javascript 如何让append-child以单独的行而不是一行编写html？

javascript html

Javascript 如何让append-child以单独的行而不是一行编写html？,javascript,html,append,Javascript,Html,Append,我有一个附加输入元素的按钮。每当我这样做时，innerHTML都会返回 <input><input><input> 我想要一个类似下面的innerHTML 而不是 您可以简单地使用元素将每个输入附加到下一行。 请尝试以下代码 <!DOCTYPE html> <html> <head> <title></title> </head> <body> &l

我有一个附加输入元素的按钮。每当我这样做时，innerHTML都会返回

<input><input><input>
我想要一个类似下面的innerHTML 而不是

您可以简单地使用

元素将每个输入附加到下一行。
请尝试以下代码

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <!DOCTYPE html>
<head>
</head>
<body>
  <form id="formID">
    <input type="number">
    <input type="number">
    <input type="button" id="addButton" value="Add Element">
  </form>
</body>
</html>

</body>
</html>

<script type="text/javascript">
    let addButton = document.getElementById("addButton");
let form = document.getElementById("formID");
addButton.onclick = function test() {
    var br = document.createElement("BR");
  let input = document.createElement("input");
  form.appendChild(br);
  form.appendChild(input);
};  

</script>   


让addButton=document.getElementById（“addButton”）；
让form=document.getElementById（“formID”）；
addButton.onclick=功能测试（）{
var br=document.createElement（“br”）；
让输入=document.createElement（“输入”）；
表格.附属儿童(br);；
表单。追加子项（输入）；
};
您可以简单地使用

元素将每个输入附加到下一行。
请尝试以下代码

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <!DOCTYPE html>
<head>
</head>
<body>
  <form id="formID">
    <input type="number">
    <input type="number">
    <input type="button" id="addButton" value="Add Element">
  </form>
</body>
</html>

</body>
</html>

<script type="text/javascript">
    let addButton = document.getElementById("addButton");
let form = document.getElementById("formID");
addButton.onclick = function test() {
    var br = document.createElement("BR");
  let input = document.createElement("input");
  form.appendChild(br);
  form.appendChild(input);
};  

</script>   


让addButton=document.getElementById（“addButton”）；
让form=document.getElementById（“formID”）；
addButton.onclick=功能测试（）{
var br=document.createElement（“br”）；
让输入=document.createElement（“输入”）；
表格.附属儿童(br);；
表单。追加子项（输入）；
};  


让addButton=document.getElementById（“addButton”）；
让form=document.getElementById（“formID”）；
addButton.onclick=功能测试（）{
var br=document.createElement（“br”）；
让输入=document.createElement（“输入”）；
表格.附属儿童(br);；
表单。追加子项（输入）；
log（form.innerHTML）；
};

这将在控制台中输出以下内容

<input type="number">
        <input type="number">
        <input type="button" id="addButton" value="Add Element">
<br><input><br><input><br><input>
按钮导致的最后一行 innerHTML是否可能以这种方式显示

<input type="number">
<input type="number">
<input type="button" id="addButton" value="Add Element">
<br>
<input>
<br>
<input>








让addButton=document.getElementById（“addButton”）；
让form=document.getElementById（“formID”）；
addButton.onclick=功能测试（）{
var br=document.createElement（“br”）；
让输入=document.createElement（“输入”）；
表格.附属儿童(br);；
表单。追加子项（输入）；
log（form.innerHTML）；
};

这将在控制台中输出以下内容

<input type="number">
        <input type="number">
        <input type="button" id="addButton" value="Add Element">
<br><input><br><input><br><input>
按钮导致的最后一行 innerHTML是否可能以这种方式显示

<input type="number">
<input type="number">
<input type="button" id="addButton" value="Add Element">
<br>
<input>
<br>
<input>
如果需要，可以添加一个div内容，以便向下移动按钮：

<body>
   <form id="formID">
      <div id=content>
          <input type="number">
          <input type="number">
      </div>  
      <input type="button" id="addButton" value="Add Element">
  </form>
</body>
您可以使用p而不是BR来获得更多空间

如果需要，您可以添加一个div内容以便向下移动按钮：

<body>
   <form id="formID">
      <div id=content>
          <input type="number">
          <input type="number">
      </div>  
      <input type="button" id="addButton" value="Add Element">
  </form>
</body>
您可以使用p而不是BR来获得更多的空间

新行在html中没有任何区别。是否要使用css对元素进行排序？或者您想在追加输入之前追加一个

？新行在html中没有任何区别。是否要使用css对元素进行排序？或者您想在追加输入之前追加一个

？您好。添加br标记会生成一个innerHTML，例如


是否可以像这样附加元素

这样您就不需要这种类型的解决方案了@sirgai123这是在下一行附加子节点的最佳方式@Sirgai123我主要关心的是innerHTML。追加子对象，然后执行console.log（form.innerHTML）；显示此输出，而不是Hi。添加br标记会生成一个innerHTML，例如


是否可以像这样附加元素

这样您就不需要这种类型的解决方案了@sirgai123这是在下一行附加子节点的最佳方式@Sirgai123我主要关心的是innerHTML。追加子对象，然后执行console.log（form.innerHTML）；显示此输出


而不是 
  let addButton = document.getElementById("addButton");
  let contenitor = document.getElementById("contenitor");
  addButton.onclick = function test() {
      let input = document.createElement("input");
      let br = document.createElement("BR");
      contenitor.appendChild(br);
      contenitor.appendChild(input);
   };