Question

我是JS / Laravel的新手。我写了这个简单的JS，按需添加2个字段到我的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
        }
    });

});

它不起作用 - 当它转换为HTML时，HTML呈现出如下：

    <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>

没有放在我希望它们上面的位置，搞砸了所有的CSS，而不是像我想的那样将文本框放在内联。

但是，当我这样做时：

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

区别是什么？我错过了什么？

Answer 1

这不是DOM的工作方式。在浏览器的眼中，每个标记都是一个元素，一个arr[n]对象的实例。您无法单独添加开始和结束标记。您应该附加元素。 HTMLElement方法解析传递的字符串，创建相应的DOM元素并将它们附加到DOM中的指定位置。

如果您将格式错误的HTML传递给它，您将在不同的浏览器上获得不同的结果。例如，append调用不会在我的Chromium浏览器上创建任何元素，因为它是无效标记。生成的第一个脚本的标记不会产生预期的标记，因为通过编码，所有元素都成为兄弟，即生成的元素不是嵌套元素。

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

.append("</div>");

现在，如果你想将元素附加到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并选择它：

.form-inline

DOM是树。

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

Answer 2

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);

Answer 3

jquery append方法（http://api.jquery.com/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，你必须一次性完成它，这样它就可以同时被解释为一大块元素。

为什么javascript会渲染东西

3 个答案: