如何将JavaScript变量嵌入append()内的HTML代码中？

嘿，我来帮你搞定这个需求！你需要把JavaScript里的max变量值插入到要追加的HTML代码中，替换掉{{$max}}来生成正确的name属性（比如street[2]）对吧？这里有几种简单可行的方法：

方法1：ES6模板字符串（推荐） #

这是最简洁直观的方式，用反引号（）包裹整个HTML字符串，变量用${变量名}`的形式嵌入：

var max = 1;
$(wrapper).on("click", ".add_field_button", function(e){
    e.preventDefault();
    if(max < max_fields){
        max++;
        console.log(max);
        // 用模板字符串插入max变量
        $(wrapper).append(`<input id="street" name="street[${max}]" class="form-control" type="text" placeholder="" value="">`);
    }
})

模板字符串会自动解析${max}并替换成变量的实际值，现在主流浏览器都支持这种语法，写起来也最省心。

方法2：传统字符串拼接（兼容ES5及更早环境） #

如果你的项目需要兼容旧环境，可以用字符串拼接的方式，把变量和HTML字符串片段用+连接起来：

var max = 1;
$(wrapper).on("click", ".add_field_button", function(e){
    e.preventDefault();
    if(max < max_fields){
        max++;
        console.log(max);
        // 字符串拼接插入max变量
        $(wrapper).append('<input id="street" name="street[' + max + ']" class="form-control" type="text" placeholder="" value="">');
    }
})

注意要保持引号的正确闭合，字符串部分用单引号或双引号包裹，变量放在+中间即可。

方法3：jQuery元素构造法 #

另一种更清晰的方式是直接用jQuery创建元素，然后单独设置属性，避免字符串拼接的引号问题：

var max = 1;
$(wrapper).on("click", ".add_field_button", function(e){
    e.preventDefault();
    if(max < max_fields){
        max++;
        console.log(max);
        // 创建input元素并设置属性
        var newInput = $('<input>', {
            id: 'street',
            name: 'street[' + max + ']',
            class: 'form-control',
            type: 'text',
            placeholder: '',
            value: ''
        });
        $(wrapper).append(newInput);
    }
})

这种方式在属性较多时更易维护，也不容易出错。

你之前用的{{$max}}是模板引擎（比如Blade、Twig）的语法，但这里是前端JavaScript环境，所以要用JS原生的变量插入方式，上面的任意一种方法都能帮你得到street[2]这样的name属性值。

内容的提问来源于stack exchange，提问作者Gustavo Aguiar