Jquery or Javascript 添加HTML对象

原始HTML

    经度
    

          
    

old.png

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

实现效果

    经度
    
 
        

                
                
                        
                
        
    

new.png

尝试方法

使用 before、after，直接追加 HTML

            //添加经纬度选择框
            $("input[id$='.Longitude']").each(function () {
                //方法一
                $(this).before('
');
                $(this).after('
')
            });

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

bugger.png

查看代码如下

    经度
    
 
        

        
        
              
         
    

发现

后自动补全了

改进方法一：Javascript outHTML

            //添加经纬度选择框
            $("input[id$='.Longitude']").each(function () {
                var this_id = $(this).attr("id");
                document.getElementById(this_id).outerHTML = '
'
                    + document.getElementById(this_id).outerHTML
                    + '
';
            });

改进方法二：Jquery prop outHTML

            //添加经纬度选择框
            $("input[id$='.Longitude']").each(function () {
                var oldHtml = $(this).prop("outerHTML");
                $(this).prop("outerHTML", '
' + oldHtml + '
');
            });