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

Question

我是新手，所以在此先感谢您的帮助。我正在设置一个简单的地理位置页面。目前，当我单击一个按钮时，会弹出一个警告框来说明地理位置设置。

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

我被告知我需要使用 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>

Answer 1

下面是append的简单使用方法，它与appendTo非常相似，只是语法不同：

$('body').append('latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp);

Answer 2

在您的 html

中创建一个容器

<div id="geoDisplay"></div>

然后创建一个包含地理位置的元素并将其附加到新容器。

$('<div>latitude: ' + latitude + ' longitude: ' + longitude + 
' accuracy: ' + accuracy + ' timestamp: ' + timestamp + '</div>')
  .appendTo($('#geoDisplay'));

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

Answer 3

在您的文档中插入 <p class="data"></p>

替换：

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

    }

与：

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

    }

Answer 4

您需要创建一个元素并将其添加到您的 DOM。例如：

var coordlabel = '<label>latitude: ' + latitude + 'longitude: ' + longitude + 
'accuracy: ' + accuracy + 'timestamp: ' + timestamp + '</label>';
$('body').append(coordlabel);

Answer 5

我假设你问的是如何获取你的字符串：

'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp

在 DOM 上的现有节点内。

如果是这种情况，请阅读此post中的剩余信息，因为有些事情您需要了解。

DOM代表文档对象模型。
节点是您的 html 元素，可以通过 Javascript 使用选择器进行操作。例子。 JQUERY: $('#element') 是一个节点选择器。

如果您想使用 Jquery 输出由 javascript 生成的字符串，那么您可以这样做：

var str = 'latitude: ' + latitude + 'longitude: ' + longitude + 'accuracy: ' + accuracy + 'timestamp: ' + timestamp;
$('#element').text(str);

http://jsfiddle.net/amLtprmt/

这不会附加节点，我不相信这是你想要做的。

要在本机 JavaScript 中执行此操作，您需要执行以下操作：

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

http://jsfiddle.net/56tp7te1/

这是假设您的 html 看起来类似于：

<html>
<body>
<div id='element'></div>
</body>
</html>

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

How to use appendTo to display information instead of in an alert box?

javascript

jquery

append

popup

appendto