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

Question

I'm a newbie so thanks in advance for any help. I am setting up a simple geolocation page. Currently when I click a button, an alert popup box states the geolocation settings.

The problem - instead of the result popping up in a box, I need the geolocation info to display on the page itself.

I was told I need to use the appendTo element and I've tried many different ways but nothing happens.

Here is the current script:

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

jontewks · Answer 1 · 2015-08-25T21:16:48.677

1

Here is a simple way of using append, which is very similar to appendTo, just with a different syntax:

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

edited Aug 25 '15 at 21:16

answered Aug 25 '15 at 21:10

jontewks

458
3
7

1

`$(body)` does not work, but `$(document.body)` and `$('body')` does. – Chris Yongchu Aug 25 '15 at 21:16

score 1 · Accepted Answer · answered Aug 25 '15 at 21:10

1

Create a container in your html

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

Then create an element containing the geolocation and append it to the new container.

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

Now every time you click the button, it will append a div containing the geolocation information.

answered Aug 25 '15 at 21:10

Jason

506
3
14

Hi, I'm not sure if I need to post something somewhere else but I wanted to say thank you for everyone's responses. I tried this first suggestion and it worked! Thanks very much, what a great forum this is. – LearningAway Aug 25 '15 at 21:32

score 1 · Answer 3 · answered Aug 25 '15 at 21:11

1

Insert a <p class="data"></p> in your document

Replace:

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

    }

With:

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

    }

answered Aug 25 '15 at 21:11

Leo Javier

1,383
12
19

This is the much shorter answer to my jquery answer +1 – THE AMAZING Aug 25 '15 at 21:27

score 0 · Answer 4 · answered Aug 25 '15 at 21:12

0

You need to create an element and add it to your DOM. For example:

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

answered Aug 25 '15 at 21:12

Sami

2,050
1
13
25

THE AMAZING · Answer 5 · 2015-08-25T21:21:51.730

I assume you are asking how to get your string:

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

inside an existing node on the DOM.

If this is the case, then please read the remaining information in this post because there are some things you need to know.

DOM stands for the Document Object Model.
Nodes are your html Elements that can be manipulated by Javascript using selectors. Example. JQUERY: $('#element') is a node selector.

If you are wanting to use Jquery to output your string generated by javascript then you would do:

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

http://jsfiddle.net/amLtprmt/

This will not append the Node, i do not believe that is what you were trying to do.

To do this in native JavaScript you would do:

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/

This is assuming your html looks similar to:

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

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

5 Answers5