Javascript 如何使用appendTo显示信息而不是在警报框中？_Javascript_Jquery_Popup_Append_Appendto

Javascript 如何使用appendTo显示信息而不是在警报框中？

javascript jquery

Javascript 如何使用appendTo显示信息而不是在警报框中？,javascript,jquery,popup,append,appendto,Javascript,Jquery,Popup,Append,Appendto,我是新手，所以提前谢谢你的帮助。我正在设置一个简单的地理定位页面。当前，当我单击按钮时，会出现一个警报弹出框，说明地理位置设置问题是，我需要在页面上显示地理位置信息，而不是在框中弹出结果有人告诉我需要使用appendTo元素，我尝试了许多不同的方法，但什么都没有发生以下是当前脚本： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

我是新手，所以提前谢谢你的帮助。我正在设置一个简单的地理定位页面。当前，当我单击按钮时，会出现一个警报弹出框，说明地理位置设置

问题是，我需要在页面上显示地理位置信息，而不是在框中弹出结果

有人告诉我需要使用appendTo元素，我尝试了许多不同的方法，但什么都没有发生

以下是当前脚本：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Geolocation</title>

    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.       
    js"</script>    

    <section>
    <script>
    $(document).ready(function() {
    $('#startGeo').click(checkLocation);

    function checkLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getLocation, 
        locationFail);
    }
    else  {
        document.write('You do not have geolocation');
    }

    } 

    function getLocation(position) {
        var latitude = position.coords.latitute;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var timestamp = position.coords.timestamp;


    alert('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

    function locationFail() {
    document.write('We did not get your location. Please check your  
    settings.')
    }

    });


    </script>

    </head>

    <body>

    <button id="startGeo">Click here to check your geolocation 
    abilities</button>

    </body>
    </html>


地理定位
下面是一种简单的使用方法，与appendTo非常相似，只是语法不同：
$('body').append('latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

在html中创建一个容器
<div id="geoDisplay"></div>



然后创建一个包含地理位置的元素，并将其附加到新容器中
$('<div>latitude: ' + latitude + ' longitude: ' + longitude + 
' accuracy: ' + accuracy + ' timestamp: ' + timestamp + '</div>')
  .appendTo($('#geoDisplay'));

$（“纬度：”+纬度+“经度：”+经度+
'准确度：'+准确度+'时间戳：'+时间戳+''）
.appendTo（$（“#geoDisplay”）；

现在，每次单击按钮时，它都会附加一个包含地理位置信息的div。
在文档中插入一个

替换：
alert('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

$('.data').html('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

与：
alert('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

$('.data').html('latitude: ' + latitude + 'longitude: ' + longitude + 
    'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

    }

您需要创建一个元素并将其添加到DOM中。例如：
var coordlabel = '<label>latitude: ' + latitude + 'longitude: ' + longitude + 
'accuracy: ' + accuracy + 'timestamp: ' + timestamp + '</label>';
$('body').append(coordlabel);

var coordlabel='纬度：'+纬度+'经度：'+经度+
'准确度：'+准确度+'时间戳：'+时间戳+''；
$（'body'）.append（coordlabel）；
我猜您是在问如何获取字符串：
'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp

在DOM上的现有节点内
如果是这样的话，那么请阅读本文的剩余信息，因为有些事情你需要知道

DOM代表文档对象模型
节点是可以由Javascript使用选择器操纵的html元素。例子。JQUERY:$（“#元素”）
是一个节点选择器

如果您希望使用Jquery输出javascript生成的字符串，则可以执行以下操作：
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp;
$('#element').text(str);

var node = document.getElementById('element');
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: '       + accuracy + 'timestamp: ' + timestamp;
node.innerHTML = '';
node.appendChild(document.createTextNode(str));


这不会附加节点，我不相信这是您试图做的
要在本机JavaScript中执行此操作，请执行以下操作：
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp;
$('#element').text(str);

var node = document.getElementById('element');
var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: '       + accuracy + 'timestamp: ' + timestamp;
node.innerHTML = '';
node.appendChild(document.createTextNode(str));


这是假设您的html看起来类似于：
<html>
<body>
<div id='element'></div>
</body>
</html>


$（body）
不起作用，但$（document.body）
和$（'body'）
起作用。这是对我的jquery答案的简短回答+1您好，我不确定是否需要在其他地方发布一些东西，但我想感谢大家的回复。我尝试了第一个建议，它成功了！非常感谢，这是一个多么棒的论坛啊。