Jquery or Javascript 添加HTML对象

原始HTML

<div class="form-group">
    <label title="" class="control-label col-sm-4 col-xs-4">经度</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

需要在文本框后添加坐标拾取按钮

实现效果

<div class="form-group">
    <label title="" class="control-label col-sm-4 col-xs-4">经度</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="坐标拾取">
                        <i class="fa fa-map-marker"></i>
                </span>
        </div>
    </div>
</div>

new.png

尝试方法

使用 before、after，直接追加 HTML

            //添加经纬度选择框
            $("input[id$='.Longitude']").each(function () {
                //方法一
                $(this).before('<div class="input-group">');
                $(this).after('<span onclick="getLongitude();" class="input-group-addon" title="坐标拾取"><i class="fa fa-map-marker"></i></span></div>')
            });

内容加上了，可是按钮换行，果断不能忍

bugger.png

查看代码如下

<div class="form-group">
    <label title="" class="control-label col-sm-4 col-xs-4">经度</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="坐标拾取">
              <i class="fa fa-map-marker"></i>
        </span> 
    </div>
</div>

发现 <div class="input-group"> 后自动补全了 </div>

改进方法一：Javascript outHTML

            //添加经纬度选择框
            $("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="坐标拾取"><i class="fa fa-map-marker"></i></span></div>';
            });

改进方法二：Jquery prop outHTML

            //添加经纬度选择框
            $("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="坐标拾取"><i class="fa fa-map-marker"></i></span></div>');
            });