Using the DOM to add elements, document.write

Question

I just found out (not thanks to IE) that I cannot use document.write scripts in XHTML. However, there seems to be a way around this by using the DOM to add elements. I dont know. This is alien to me.

Here's 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 only shows a warning. FF displays it correctly.

And it displays without errors and displays correctly on one of my pages: http://clients.flipflopmedia.com

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

Answer 1

To answer your question: Will will add 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 any element that you want to use. For example, 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. eg $("#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 technologies like php, .net etc.

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

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

Answer 2

Take a look at jQuery, which allows you to change the DOM much easier. For example, instead of your document.write line, you can simply do $('#copyrightElement').html("Copyright © 2004-" + update + " flip-flop media");

Or, if you prefer simple Javascript, you can do something like:

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

If div / span / p / everything that contains footer text has the attribute id="copyrightElement" .

However, I would advise you to do this in a scripting language in the background (not sure if your website is using.) Users who have Javascript disabled will not see your copyright statement.

Answer 3

Fixed. Found an article and I don’t understand why it works, but here is all that I have done with JS:

Before the start of the script (added): //

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

I tried this before, but the article misinformed me, saying to add this at the beginning:

Full script with CDATA markup:

//

Answer 4

You can add html as follows:

  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);