为什么javascript呈现东西

我是JS/Laravel的新手。我写这个简单的JS是为了在我的Laravel Blade页面上按需添加两个字段。我希望两个输入框都是内联的，而不是一个在另一个上面。当我这样写JS时：

    $(document).ready(function() {
    var max_fields      = 4; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x <= max_fields){ //max input box allowed
                        $(wrapper).append(" <div class='form-inline'> "); 
            $(wrapper).append(" <div class='form-group'> ");
            $(wrapper).append(" <label for='products_id["+x+"]'>Product ID:</label> ");
            $(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='products_id["+x+"]'> "); 
            $(wrapper).append(" </div>"); 
            $(wrapper).append(" <div class='form-group'> ");
            $(wrapper).append(" <label for='quantity["+x+"]' style='margin-left:10px'>Quantity:</label> ");
            $(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> ");
            $(wrapper).append(" </div> "); 
            $(wrapper).append(" </div> "); 

            x++; //text box increment
        }
    });

});

    <div class="input_fields_wrap">
    <button class="btn btn-primary add_field_button" style="margin-bottom:5px">Add More Fields</button>
    <div class="form-inline"> </div> 
    <div class="form-group"> </div> 
    <label for="products_id[1]">Product ID:</label>  
    <input type="text" class="form-control" style="margin-left:5px" name="products_id[1]">   
<div class="form-group"> </div> 
<label for="quantity[1]" style="margin-left:10px">Quantity:</label>  
<input type="text" 
class="form-control" style="margin-left:5px" name="quantity[1]">     </div>

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（xDOM不是这样工作的。在浏览器中，每个标记都是一个元素，是
HTMLElement
对象的实例。不能单独添加开始标记和结束标记。应该附加一个元素。
append
方法解析传递的字符串，创建相应的DOM元素并将它们附加到指定的位置DOM中的不一致性

如果您将格式错误的html传递给它，您将在不同的浏览器上得到不同的结果；

call不会在我的Chromium浏览器上创建任何元素，因为它是无效的标记。第一个脚本生成的标记不会生成预期的标记，因为通过这种编码方式，所有元素都成为同级元素，即生成的元素不是嵌套元素

这是生成预期标记的方法之一：

var $col = $("<div class='form-inline'>") // the top level element of the collection
  .appendTo(wrapper) 
  .append('...') // the appended contents will be child of the `.form-inline` element

DOM是一个树。

---

---

建议：如果要动态生成多个元素，可以使用模板库。在不使用模板库的情况下维护此代码可能是一场噩梦。

jQuery在追加时正在构建DOM

添加div时，例如：

$(wrapper).append(" <div class='form-group'> ");

$（包装器）。追加（“”）；

jQuery正在添加div并将其关闭。您可以在第一个结果中看到这一点

添加图元时，请包括其结束标记

最好先构建html字符串，然后一次完成全部追加

s="<div class='form-group'> "+
" <label for='products_id["+x+"]'>Product ID:</label> "+
" <input type='text' class='form-control' style='margin-left:5px' name='products_id["+x+"]'> "+
" </div>"+
" <div class='form-group'> "+
" <label for='quantity["+x+"]' style='margin-left:10px'>Quantity:</label> "+
" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> "+
" </div> "+
" </div> "
 $(wrapper).append(s);

s=“”+
“产品ID：”+
"  "+
" "+
"  "+
“数量：”+
"  "+
"  "+
"  "
$（包装器）。追加；

jquery append方法（）将字符串解释为html元素，并将其添加到DOM中：

$(wrapper).append(" <div class='form-group'> ");

$（包装器）。追加（“”）；

当您稍后开始添加结束标记时，为时已晚。此外，当您将div附加到包装器时，您直接将其附加，这意味着此行将生成包装器元素的新子元素：

 $(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> ");

$（包装器）。追加（“”）；

…而不是表单组元素的子元素

---

如果你想让你的元素嵌套，你必须以嵌套的方式将它们分别附加到它的父元素，而不是一个遥远的祖先。如果你想添加一大块html，你必须一次完成，这样它就可以被解释为一大团元素。

谢谢你的评论。我是基于我在我不知道。我在做什么。现在我知道了！谢谢。

s="<div class='form-group'> "+
" <label for='products_id["+x+"]'>Product ID:</label> "+
" <input type='text' class='form-control' style='margin-left:5px' name='products_id["+x+"]'> "+
" </div>"+
" <div class='form-group'> "+
" <label for='quantity["+x+"]' style='margin-left:10px'>Quantity:</label> "+
" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> "+
" </div> "+
" </div> "
 $(wrapper).append(s);

$(wrapper).append(" <div class='form-group'> ");

 $(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> ");