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

我是一個新手，所以提前感謝任何幫助。我正在設置一個簡單的地理位置頁面。當前當我點擊一個按鈕時，一個警告彈出框顯示地理定位設置。如何使用appendTo來顯示信息而不是在警告框中？

這個問題 - 而不是在框中彈出的結果，我需要地理位置信息顯示在頁面本身。

有人告訴我需要使用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>

來源

2015-08-25 LearningAway

創建一個容器您的html

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

然後創建一個包含地理定位和附加到新的容器。

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

現在，每次單擊按鈕時，它都會附加一個包含地理位置信息的div。

來源

2015-08-25 21:10:36 Jason

嗨，我不確定是否需要發佈其他地方的東西，但我想說，感謝大家的迴應。我試過這個第一個建議，它的工作！非常感謝，這是一個偉大的論壇。 – LearningAway

歡迎您:) –

下面是使用append一個簡單的方法，這是非常相似的appendTo，只是用不同的語法：

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

來源

2015-08-25 21:10:00 jontewks

'$（體）'不工作，但'$（document.body）'和'$（'body'）'做。 –

在文檔中插入一個<p class="data"></p>

替換：

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

    }

有了：

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

    }

來源

2015-08-25 21:11:59

這是我的jquery答案+1的簡短答案 –

您需要創建一個元素，並將其添加到您的DOM。例如：

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

來源

2015-08-25 21:12:40 Sami

我以爲你是問如何讓你的字符串：

'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>

來源

2015-08-25 21:16:12

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

回答

相關問題