using the DOM to add elements, document.write

Question

I have just learned (no thanks to IE) that I cannot use document.write scripts in XHTML. However, it seems there is a way around it by using the DOM to add elements. I don't know. It's foreign to me.

Here's the JS:

copyright=new Date();
update=copyright.getFullYear();
document.write("Copyright © 2004-"+ update + " flip-flop media");

So, is there a way to use this script in XHTML? IE 8 shows an empty space with an error warning. IE 7 shows just the warning. FF does display it properly.

And it shows up with no errors and displays properly on one of my pages: http://clients.flipflopmedia.com

But not on the main page: http://www.flipflopmedia.com/NewSite/index.html

Solution 1

To answer your question: The will append a copyright notice as the last element on the page.

(function(){
    // create almost any element this way...
    var el = document.createElement("div");
    // add some text to the element...
    el.innerHTML = "Copyright © 2004-"+ (new Date).getFullYear() + " flip-flop media";
    // "document.body" can be any element on the page.
    document.body.appendChild(el);
}());

You can always change "document.body" to whatever element you want to use. Such as document.getElementById("copyright").appendChild(el);

jQuery

You already have jQuery on the page. So just use:

$(function(){
    // "body" is a css selector.
    // you can use almost any css selector 
    // to find the element you need. e.g. $("#copyright")...
    $("body").append("Copyright © 2004-"+ (new Date).getFullYear() + " flip-flop media");
    // you can also use html() to replace the existing content.
    // $("#copyright").html("content goes here");
});

What you should do:

Use server-side technologies like php, .net, etc.

You probably are running php on your server which means the following should work anywhere in your page (if it has a php extension (index.php instead of index.html), of course):

<?php
    echo 'copyright &copy; 2004-' + date("Y") . ' flip-flop media';
?>

Solution 2

Have a look at jQuery, which will allow you to modify the DOM in a much easier way. For example instead of your document.write line, you could just do $('#copyrightElement').html("Copyright © 2004-" + update + " flip-flop media");

Or if you prefer plain Javascript, you could do something like:

document.getElementById('copyrightElement').innerHTML = "Copyright © 2004-" + update + " flip-flop media";

Where the div/span/p/whatever that holds your footer text has an id="copyrightElement" attribute assigned.

However I'd advise to do this in a scripting language on the back-end (not sure what your website uses.) Users that have Javascript disabled won't see your copyright statement.

Solution 3

Fixed it. Found an article, and I don't understand why it works, but here's all I did to the JS:

Before the script begins (added): //

And at the end (added): //]]>

I had tried this earlier, but the article misinformed me by saying to add this at the beginning:

The full script with CDATA markup:

//

Comments

[Benjamin Manns]

If you're not using a back-end scripting language, you could specify a default - Copyright © 2004-2010 ... - and use javascript to replace 2010 with the new year (once it changes). That way non-javascript users will see 2004-2010 and js users will see 2004-current year. (However doing this back-end is highly recommended).

[flipflopmedia]

Geez, I'm so confused. Just changing the .html extension to .php and adding your php line: <?php echo 'copyright &copy; 2004-' + date("Y") . ' flip-flop media'; ?> Only displays: 2010 flip-flop media I am not sure how to implement any of your 'function' statements above, but everything I have tried omits "Copyright 2004-" Call me dumb, this is just not my forte! Thanks, Tracy