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

【问题标题】：How to use appendTo to display information instead of in an alert box?如何使用 appendTo 来显示信息而不是在警告框中？
【发布时间】：2015-11-19 17:57:03
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery popup append appendto

【解决方案1】：

这里有一个简单的使用append的方法，它和appendTo非常相似，只是语法不同：

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

【讨论】：

$(body) 不起作用，但 $(document.body) 和 $('body') 可以。

【解决方案2】：

在你的 html 中创建一个容器

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

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

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

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

【讨论】：

嗨，我不确定是否需要在其他地方发布一些内容，但我想说谢谢大家的回复。我尝试了第一个建议，它奏效了！非常感谢，这是一个多么棒的论坛。

【解决方案3】：

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

替换：

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

    }

与：

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

    }

【讨论】：

这是对我的 jquery 回答 +1 的简短回答

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

在 DOM 上的现有节点内。

如果是这种情况，请阅读这篇文章中的剩余信息，因为有些事情你需要知道。

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>

【讨论】：