Problems inserting a text node before an existing element using Greasemonkey

Question

I have a script that gets the current server time and it works great. Problem is, I'd like to insert the server time right before the clock on the page (that shows local time even though activities on the site tell you that you can do it again at a specific server time). For some reason I can't figure out how to stick the darn thing where I want it.

A target page, that you can access without logging in, is Here

The id of the div I want to insert my node before appears to be clock-wrapper

Code I've tried: (inserted between the alert and console.log, in the "original script", below)

var textNode = document.createElement('b');
var clock=document.getElementById('clock-wrapper');

textNode.appendChild ('<b>' + serverTime + '</b>');
clock.parentNode.insertBefore(textNode, clock);

and

var textNode = document.createElement('b');
var getRef = document.getElementById("clock-wrapper");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(textNode, getRef);

Here is the original script:

// ==UserScript==
// @name      test server time
// @namespace http://trueidiocy.us
// @include   https://www.google.com
// @include   http://stackoverflow.com
// @include   http://www.thepikaclub.co.uk*
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant     GM_xmlhttpRequest
// ==/UserScript==
GM_xmlhttpRequest ( {
    url: location.href,
    method: "HEAD",
    onload: function (rsp) {
        var serverTime  = "Server date not reported!";
        var RespDate    = rsp.responseHeaders.match (/\bDate:\s+ (.+?) (?:\n|\r)/i);
        if (RespDate && RespDate.length > 1) {
            serverTime  = RespDate[1];
        }
        alert ("Server Time: " + serverTime);

        console.log ("Server Time: ", serverTime);
    }
} );

What am I missing here? Do I just need to find a better reference source than I was using for future scripts? Also, how difficult would it be to make the script run again to update the time every minute or so?

score 1 · Accepted Answer · answered Oct 09 '13 at 07:53

The first code snippet, in the question, is invalid (bad appendChild call), but the second code snippet would work -- except that the <b> tag was added with empty contents.

Anyway, since your base script is (wisely) loading jQuery, use it. jQuery's .before() works great here. The code would be:

GM_xmlhttpRequest ( {
    url:    location.href,
    method: "HEAD",
    onload: function (rsp) {
        var serverTime  = "Server date not reported!";
        var RespDate    = rsp.responseHeaders.match (/\bDate:\s+(.+?)(?:\n|\r)/i);
        if (RespDate  &&  RespDate.length > 1) {
            serverTime  = RespDate[1];
        }
        $("#clock-wrapper").before ('<b>' + serverTime + '</b>');
    }
} );

If you want to re-fetch the server time every minute, or so, use javascript's setInterval(). Except that you need to avoid creating more than one <b> tag, so the code needs an additional check. It becomes:

getServerTime (); //-- Initial call

//-- Recheck every minute
var clkRefreshTimer = setInterval (getServerTime, 60 * 1000); // 60 seconds

function getServerTime () {
    GM_xmlhttpRequest ( {
        url:    location.href,
        method: "HEAD",
        onload: function (rsp) {
            var serverTime  = "Server date not reported!";
            var RespDate    = rsp.responseHeaders.match (/\bDate:\s+(.+?)(?:\n|\r)/i);
            if (RespDate  &&  RespDate.length > 1) {
                serverTime  = RespDate[1];
            }

            //-- Does our display node already exist?
            var ourTimeDisp = $("#gmTimeDisplay");
            if (ourTimeDisp.length) {
                ourTimeDisp.text (serverTime);
            }
            else {
                $("#clock-wrapper").before (
                    '<b id="gmTimeDisplay">' + serverTime + '</b>'
                );
            }
        }
    } );
}

However, you might be smart to look up how to add a JS clock to the page and only call GM_xmlhttpRequest once just to initialize your new clock. Then your clock JS would update it as often as you liked without aggravating the server.

jQuery is only in there because I tried to use jNode out of my other script in my first attempt and I didn't take it back out lol... but for once the jQuery you're trying to get me to use almost makes sense... I'll consider the clock thing, although I don't think this way will be a problem as unless the rules changed there are games on the site you are allowed to autorefresh on if you set it to more than 30 sec apart - so every 60 secs for the time shouldn't be a problem. My only problem is how it'll behave with my dialup connection - the clock might be better for that... or just run at load — Kat Cox, Oct 09 '13 at 10:09
I deleted the attempts, so I don't know if that empty tag was in my script or if it was a copy/paste error... I'm on my way to sleep, but I'll try this in the morning to make sure it works (and that I understand it lol) and then accept the answer... Hey, I'm not arguing about not using jQuery anymore (although it still confuses the heck out of me for some reason lol)! — Kat Cox, Oct 09 '13 at 10:10
Sorry... I forgot about this. I tried the first one and it works great (haven't tried the refreshing version yet). I actually kind of looked for a clock before when I was trying to put a countdown clock on a page but couldn't find anything that worked (or that I could understand)... think you could point me to some resources? Anyways, thank you for a clear, understandable answer (again!)! — Kat Cox, Oct 11 '13 at 18:06
Start [with this answer](http://stackoverflow.com/a/15376242/331508) and then look up how to initialize `Date()` with your server time (which you get per this answer). Ask a new question if you need to, but all the pieces of the puzzle are here on SO (and on the net). — Brock Adams, Oct 11 '13 at 21:38

Problems inserting a text node before an existing element using Greasemonkey

1 Answers1