insertBefore and appendChild Tutorial by Devin
Copyright Sans Pareil @ Proboards 102
Do not redistribute without my permission..

First off, insertBefore allows you to insert content before a certain area, and appendChild allows you to insert content into a certain area.

We'll start with appendChild first, and the code we will be working off is "Content at Top of Forum."

<script type="text/Javascript">
/* Content at Top of Forum by Devin
Copyright Sans Pareil @ Proboards 102
Do not redistribute without permission */
myContent = "Your content here.";
myAlign = "center";
myDiv = document.createElement("div");
myDiv.innerHTML = myContent;
myDiv.align = myAlign;
myImg = document.createElement("img");
myImg.src = "http://"
myImg.alt = "Image"
myDiv.appendChild(myImg)
document.body.insertBefore(myDiv, document.getElementsByTagName("br")[0])
</script>

First, we obviously start the script, the copyright blah blah.
Then we define myContent, which would be the content that is displayed inside your new element.
Then we define myAlign, which determines the justification of your content.
Then we create the element we will be inserting before and appending, and we call it myDiv.
We classify myDiv's innerHTML and align.
Then we create the image that will be appended into myDiv and we specify the url and alternate text.
Now we have two new elements, myDiv and myImg.

We obviously want myImg inside of myDiv if we are going to insert myDiv at the top of the forum, so
myDiv.appendChild(myImg)
It is as simple as that,
and then we will insertBefore, and we need to insert before the first line break, so
document.body.insertBefore(myDiv, document.getElementsByTagName("br")[0])
and it is as simple as that, and can be useful for category splitters.
If you want to insert after, simple write
document.body.insertBefore(myDiv, document.getElementsByTagName("br")[0].nextSibling)
and vhoolah, you have added content at the top of your forum.

Try using this DOM while creating head/bases, or etcetera.

If you want to know how to make a head/base, just study this code:

<script type="text/Javascript">
<!--
/* DOM Head/Base by Devin
Copyright Sans Pareil @ Proboards 102
Do not redistribute without my permission */

//Head Image
head = "HEAD URL";
//Base Image
base = "BASE URL";

//Do not edit below.
tbl = document.getElementsByTagName("table");
td = document.getElementsByTagName("td");

if(location.href.match(/(action=home|index.cgi$|index.cgi\?$|.com$)/)){

for(i=0;i<tbl.length;i++){

if(tbl[i].width == "100%" && tbl[i].className == "bordercolor" && tbl[i].innerHTML.match(/Forum Name/)){

hdDiv = document.createElement("div");
hdDiv.align = "center";
bsDiv = document.createElement("div");
bsDiv.align = "center";
hdImg = document.createElement("img");
hdImg.src = head;
hdImg.alt = "Head";
bsImg = document.createElement("img");
bsImg.src = base;
bsImg.alt = "Base";
hdDiv.appendChild(hdImg);
bsDiv.appendChild(bsImg);

tbl[i].parentNode.insertBefore(hdDiv, tbl[i]);
tbl[i].parentNode.insertBefore(bsDiv, tbl[i].nextSibling);

}

}

}

//-->
</script>

Thanks for reading, hope that helped.