給div拼接html 拼接字符串

簡單描述：拼接html 拼接字符串，說實話，拼接這種東西我自己弄，得花費很多時間，主要是轉義字符，單引號，雙引號這種小細節調整起來比較麻煩，一旦疏忽多了少了一個符號，頁面就有點抽象了，我呢比較粗枝大葉(ｷ｀ﾟДﾟ´)!!   點擊按鈕，把地區三級聯動里的值拼接到頁面的div中。廢話不多講，上代碼

代碼：

//html代碼
<div class="col-md-2">
    <select id="province" placeholder="請選擇省">
        <option th:each="level : ${serviceProvinceMap}" 
　　　　　　　　　 th:value="${level.provinceCode}"
                th:text="${level.provinceName}" xmlns:th="http://www.w3.org/1999/xhtml"></option>
    </select>
</div>
<div class="col-md-2">
    <select id="city" placeholder="請選擇市">

    </select>
</div>
<div class="col-md-2">
    <select id="country" placeholder="請選擇縣">

    </select>
</div>
<div class="col-md-1">
        <button type="button" class="btn blue" id="addRegion">
            <i class="fa fa-check"></i>添加該地區
        </button>
</div>
<div  id="chooseAreaspi">

</div>
<input type="hidden" id="provinceHid" name="province" value=""/>
<input type="hidden" id="cityHid" name="city" value=""/>
<input type="hidden" id="countyHid" name="county" value=""/>
//js代碼

<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    var province ='';//初始是''隨后會變成'浙江省,江蘇省,北京市,'
    var city=''; //初始時''，隨后都會變成以逗號分隔的字符串並且末尾帶逗號
    var county='';//同上
    /*<![CDATA[*/
    $("#addRegion").click("click",function () {
        // 獲取到省下拉框的值 也就是得到省編碼
        var provinceCheck = $("#province").val();
        if (provinceCheck == "" ||provinceCheck== null) {
            layer.msg("請填寫地區信息！");
            return false;//跳出方法
        }
　　　　 //indexOf括號中的是 獲取到省下拉框中獲取到的文本 比如說浙江省
　　　　 //indexOf作用是從province字符串變量中索引是否有 浙江省 這個字符
　　　　 //if的意思是 省不包含某省的字符並且市不包含某市的字符並且區不包含區的字符 注意!
        if(province.indexOf($("#province").find("option:selected").text())!=-1 &&
            city.indexOf($("#city").find("option:selected").text())!=-1 &&
            county.indexOf($("#country").find("option:selected").text())!=-1 ){
            layer.msg("該地區已經存在！");
            return false;
        }
　　　　 //html拼接 給id是chooseAreaspi的div拼接html
　　　　 // "\n"是可以不寫的，粘貼html的時候，回車換行后自帶的，可以刪掉，親測可行
        var html='<br class="br"/><br class="br"/><div class="col-md-1 quyu">\n' +
            '<label class="control-label flex" >\n' +
            '使用地區<span class="star align-items">*</span>\n' +
            '</label>\n' +
            '</div><div  class="col-md-5 quyu">'+$("#province").find("option:selected").text()+'--'+$("#city").find("option:selected").text()+'--'+$("#country").find("option:selected").text()+'</div>';
        $("#chooseAreaspi").append(html);
　　　　 
　　　　 //province city county 變量拼接字符串用逗號分隔並且字符串末尾帶逗號 "浙江省,江蘇省,"
        province+=$("#province").find("option:selected").text()+",";
        city+=$("#city").find("option:selected").text()+",";
        county+=$("#country").find("option:selected").text()+",";
　　　　 //substring作用就是把province city county的末尾的逗號去掉 "浙江省,江蘇省"
        var subprovincehid =province.substring(0,province.length-1);
        var subcityHid =city.substring(0,city.length-1);
        var subcountyHid =county.substring(0,county.length-1);
        $("#provinceHid").val(subprovinceHid);
        $("#cityHid").val(subcityHid);
        $("#countyHid").val(subcountyHid);
    });
    /*]]>*/
</script>