原始HTML

<div class="form-group">
    <label title="" class="control-label col-sm-4 col-xs-4">經(jīng)度</label>
    <div class="col-sm-8 col-xs-8">
         <input type="text" name="txt_T_Bas_Event.Longitude" id="txt_T_Bas_Event.Longitude" class="form-control" style="  " value="119"> 
    </div>
</div>

old.png

需要在文本框后添加坐標(biāo)拾取按鈕

實(shí)現(xiàn)效果

<div class="form-group">
    <label title="" class="control-label col-sm-4 col-xs-4">經(jīng)度</label>
    <div class="col-sm-8 col-xs-8"> 
        <div class="input-group">
                <input type="text" name="txt_T_Bas_Event.Longitude" id="txt_T_Bas_Event.Longitude" class="form-control" style="  " value="119">
                <span onclick="getLongitude();" class="input-group-addon" title="坐標(biāo)拾取">
                        <i class="fa fa-map-marker"></i>
                </span>
        </div>
    </div>
</div>

new.png

嘗試方法

使用 before、after，直接追加 HTML

            //添加經(jīng)緯度選擇框
            $("input[id$='.Longitude']").each(function () {
                //方法一
                $(this).before('<div class="input-group">');
                $(this).after('<span onclick="getLongitude();" class="input-group-addon" title="坐標(biāo)拾取"><i class="fa fa-map-marker"></i></span></div>')
            });

內(nèi)容加上了，可是按鈕換行，果斷不能忍

bugger.png

查看代碼如下

<div class="form-group">
    <label title="" class="control-label col-sm-4 col-xs-4">經(jīng)度</label>
    <div class="col-sm-8 col-xs-8"> 
        <div class="input-group"></div>
        <input type="text" name="txt_T_Bas_Event.Longitude" id="txt_T_Bas_Event.Longitude" class="form-control" style="  " value="119">
        <span onclick="getLongitude();" class="input-group-addon" title="坐標(biāo)拾取">
              <i class="fa fa-map-marker"></i>
        </span> 
    </div>
</div>

發(fā)現(xiàn) <div class="input-group"> 后自動(dòng)補(bǔ)全了 </div>

改進(jìn)方法一：Javascript outHTML

            //添加經(jīng)緯度選擇框
            $("input[id$='.Longitude']").each(function () {
                var this_id = $(this).attr("id");
                document.getElementById(this_id).outerHTML = '<div class="input-group">'
                    + document.getElementById(this_id).outerHTML
                    + '<span onclick="getLongitude();" class="input-group-addon" title="坐標(biāo)拾取"><i class="fa fa-map-marker"></i></span></div>';
            });

改進(jìn)方法二：Jquery prop outHTML

            //添加經(jīng)緯度選擇框
            $("input[id$='.Longitude']").each(function () {
                var oldHtml = $(this).prop("outerHTML");
                $(this).prop("outerHTML", '<div class="input-group">' + oldHtml + '<span onclick="getLongitude();" class="input-group-addon" title="坐標(biāo)拾取"><i class="fa fa-map-marker"></i></span></div>');
            });