Im using the following code as I want to move a list to be the first element inside a div with the id 'tab'

var tab = document.getElementById ('tab');
var ul = document.createElement ('ul');
var text1 = document.createTextNode ('Education');
var text2 = document.createTextNode ('Experience');
var text3 = document.createTextNode ('About Me');
var text4 = document.createTextNode ('Show All');
var li1 = document.createElement ('li');
var li2 = document.createElement ('li');
var li3 = document.createElement ('li');
var li4 = document.createElement ('li');
var a1 = document.createElement ('a');
a1.href = '#';

// append list elements and assign id and class
a1.appendChild (text1);
li1.appendChild (a1);
ul.appendChild (li1);
ul.id = 'tabTop';
ul.className = 'navOption';
tab.appendChild (ul);
tab.insertBefore (ul, pAbout1);

But I get this MASSIVE error message on the error console, and I don't have a clue what it's talking about!

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 1 [nsIDOMHTMLDivElement.insertBefore]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.pealo.local/xampp/mattPea...t/loadAbout.js :: <TOP_LEVEL> :: line 75" data: no]

Any help would be appreciated!

what is the variable pAbout1? I don't see that defined anywhere.

Oh that was defined earlier on, it's a div element. I only pasted the part of the code that seems to be causing an error.

It HAS to be an object that exists in the DOM not an ID of an element.

I seeee! How would I refer to the div without the id? at the moment it's declared with

"var pAbout1 = document.getElementById ('pAbout1')"

Thanks.

Ok so that is defined elsewhere.
Seeing ALL the code in situ would be a bonus BTW.

The error message means that you are trying to reference a non-existent object (and people complain about MS error messages )
Use a bit of debugging to print object references and states during script execution.
http://www.modtalk.co.uk/article/c-a...another-alert/

Hmmm errrr... I tried pasting the code on the link you gave me to the bottom of my script and added:

alert (pAbout1)

Although since nothing new happened I'm guessing that's probably not how it's meant to be used!

Here is all of my code if you'd be so nice as to advise me what's wrong with it . Bear in mind it's the last line of code that seems to be causing the error.

// create tab for content navigation

// declare divs
var pAbout1 = document.getElementById ('pAbout1');
var pAbout2 = document.getElementById ('pAbout2');
var pAbout3 = document.getElementById ('pAbout3');
    
// edit stylesheet
var styleSheet = document.styleSheets[1];
var pAbout1 = styleSheet.cssRules[20].style;
var pAbout2 = styleSheet.cssRules[22].style;
var pAbout3 = styleSheet.cssRules[23].style;
pAbout2.setProperty ('display', 'none', '');
pAbout3.setProperty ('display', 'none', '');

// functions to show / hide relevant divs
function showAll ()
    {
        pAbout1.setProperty ('display', 'block', '');
        pAbout2.setProperty ('display', 'block', '');
        pAbout3.setProperty ('display', 'block', '');
        return false;
    }

function showAbout1 ()
    {
        pAbout1.setProperty ('display', 'block', '');
        pAbout2.setProperty ('display', 'none', '');
        pAbout3.setProperty ('display', 'none', '');
        return false;
    }

function showAbout2 ()
    {
        pAbout1.setProperty ('display', 'none', '');
        pAbout2.setProperty ('display', 'block', '');
        pAbout3.setProperty ('display', 'none', '');
        return false;
    }

function showAbout3 ()
    {
        pAbout1.setProperty ('display', 'none', '');
        pAbout2.setProperty ('display', 'none', '');
        pAbout3.setProperty ('display', 'block', '');
        return false;
    }

// alter height of div#tab so that it remains the same height for each selected tab
var tabHeight = '440px';
var tab = styleSheet.cssRules[34].style;
tab.setProperty ('height', tabHeight, '');

// create top and bottom tab lists
var tab = document.getElementById ('tab');
var ul = document.createElement ('ul');
var text1 = document.createTextNode ('Education');
var text2 = document.createTextNode ('Experience');
var text3 = document.createTextNode ('About Me');
var text4 = document.createTextNode ('Show All');
var li1 = document.createElement ('li');
var li2 = document.createElement ('li');
var li3 = document.createElement ('li');
var li4 = document.createElement ('li');
var a1 = document.createElement ('a');
a1.href = '#';

// append list elements and assign id and class
a1.appendChild (text1);
li1.appendChild (a1);
ul.appendChild (li1);
ul.id = 'tabTop';
ul.className = 'navOption';
tab.appendChild (ul);
tab.insertBefore (ul, pAbout1);

Thanks!

Need the entire page, HTML code as well. BECAUSE if the code you posted here is in the document head, it will never work! As these declarations;

var pAbout1 = document.getElementById ('pAbout1');
var pAbout2 = document.getElementById ('pAbout2');
var pAbout3 = document.getElementById ('pAbout3');

will be before the elements exist in the DOM, so they will be empty.

Ahhhh schoolboy error! lol I can't believe how often I make that same mistake, thanks again.

I've also just realised that after that bit of code I had

var pAbout1 = styleSheet.cssRules[20].style;

So I was basically trying to move a <ul> before a stylesheet rule, don't know what I was thinking when I typed that??

I think we've all been there at some time or another