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 &copy; 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

A copyright notice should reflect the date the content was created. Claiming copyright on a different date (i.e. whatever the current year is) could do you more harm than good. So your problem is best solved by removing the JS entirely. — Quentin, Mar 03 '10 at 12:57
And if the content is created dynamically and changes on, perhaps, a daily basis? — tvanfosson, Mar 03 '10 at 13:03
I am intrigued though as to why this doesn't work on your main site. I'd have expected it to not work on the client site because you're pulling in a JS file from a slightly different domain (www.flipflopmedia.com vs clients.flipflopmedia.com.) — Andy Shellam, Mar 03 '10 at 13:04
@tvanfosson The article should have a specific publication date if you want to claim that. Why not just © flip-flop media? It says essentially the same thing--this has aaaalways been mine, and will always be. (I'm not a lawyer; nobody sue me. :D ) — , Mar 03 '10 at 13:08
@tvanfosson Then the publication data can be handled by whatever published the content (which is unlikely to be client side JS) — Quentin, Mar 03 '10 at 14:23
@David -- my comment was directed at the format of the date, not the mechanism. I think the date format would depend on the law in the particular country you are in. For example, in the US it would be the date of original publication of the web site. US copyright law, AFAIK, doesn't allow a date range, though I suspect that for the purposes of the law it would use the beginning date if a range was supplied anyway. Other countries may handle this differently. — tvanfosson, Mar 03 '10 at 14:48

David Murdoch · Answer 1 · 2010-03-03T13:19:02.577

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 &copy; 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 &copy; 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';
?>

Geez, I'm so confused. Just changing the .html extension to .php and adding your php line: 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 — flipflopmedia, Mar 03 '10 at 15:11

score 3 · Answer 2 · answered Mar 03 '10 at 12:59

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.

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). — Benjamin Manns, Mar 03 '10 at 13:04

score 1 · Answer 3 · answered Mar 03 '10 at 15:43

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:

//

score 0 · Answer 4 · answered Mar 03 '10 at 13:03

You can add html this way:

   var a = document.createElement("a");
    a.setAttribute("href", "http://stackoverflow.com/questions/2371326/using-the-dom-to-add-elements-document-write");
    var top = document.getElementById("top");
    top.appendChild(a);

using the DOM to add elements, document.write

4 Answers4