How to insert a DiV in to document

I am trying to insert a Div into  a document this is the code, It works on simple forms but when I put it into the main form i get an error. I think it may be a nesting issue or somthing see sample code below..

'code to add div
               
diva = document.getElementById("test")
divb = document.createElement("div")
document.body.insertBefore(divb,diva.nextSibling)
divE.innerHTML = "<span style=\"color:red\">Test it</span>"

'html

function insertHere
set      divD = document.getElementById("firstDiv")
set      divE = document.createElement("div")
      document.body.insertBefore divE,divD
      divE.innerHTML = "<span style=\'color:red\'>Child E</span>"
Set NodeList = document.getElementsByTagName("div")

end function


<table border='1' cellpadding='0' cellspacing='0' width='25%' height='100%'><tr><td valign='top'>
    <table border='0' cellspacing='1' cellpadding='0' width='100%' height='100%' bgcolor='#f1f1ed'><tr><td valign='top'>
    <div id='masterdiv'>
        <div class='menu' onclick="SwitchMenu('sub1')"><img style='vertical-align: middle' width=20 height=20 src='icons/txtmenu.gif' border=0 hspace=3>Text Folders</div>
            <span class='options' id='sub1'>
             <div id='firstDiv'>
                <div id="childb" class='option' onmouseover="getDiv(this)" onmouseout="this.style.background='#f5f5f5'">
                <a href='http://www.google.com'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
   
'=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
'Want to insert div here
'=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

                <div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">
                <a href='http://www.industriavirtual.com.br/master.asp?code=webpacks&subcode=basico'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
   
                <div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">
                <a href='http://www.google.com'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
                        </div>
            </span>


etc...




LVL 9
JonMnyAsked:
Who is Participating?
 
NetGrooveCommented:
Here is how it goes:

<html>
<head>
<script>
function insertDiv(pDivId){
  diva = document.getElementById(pDivId);
  divb = document.createElement("div");
  divb.innerHTML = "<span style='color:red'>Test it</span>";
  diva.insertAdjacentElement("afterEnd", divb);
}
function SwitchMenu(){
}
function getDiv(){
}
</script>
</head>
<body onLoad="insertDiv('childb')">
<table border='1' cellpadding='0' cellspacing='0' width='25%' height='100%'><tr><td valign='top'>
   <table border='0' cellspacing='1' cellpadding='0' width='100%' height='100%' bgcolor='#f1f1ed'><tr><td valign='top'>
   <div id='masterdiv'>
       <div class='menu' onclick="SwitchMenu('sub1')"><img style='vertical-align: middle' width=20 height=20 src='icons/txtmenu.gif' border=0 hspace=3>Text Folders</div>
           <span class='options' id='sub1'>
            <div id='firstDiv'>
               <div id="childb" class='option' onmouseover="getDiv(this)" onmouseout="this.style.background='#f5f5f5'">
               <a href='http://www.google.com'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
   
'=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
'Want to insert div here
'=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

               <div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">
               <a href='http://www.industriavirtual.com.br/master.asp?code=webpacks&subcode=basico'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
   
               <div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">
               <a href='http://www.google.com'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
                   </div>
           </span>


0
 
jaysolomonCommented:
dunno really what you want but maybe this is it

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function insertHere(where){
      var divObj = document.getElementById(where);
            divObj.innerHTML = "<span style='color:red'>Test it</span>";
}
// -->
</script>
</head>
<body onload="insertHere('test');">
<table border='1' cellpadding='0' cellspacing='0' width='25%' height='100%'><tr><td valign='top'>
   <table border='0' cellspacing='1' cellpadding='0' width='100%' height='100%' bgcolor='#f1f1ed'><tr><td valign='top'>
   <div id='masterdiv'>
       <div class='menu' onclick="SwitchMenu('sub1')"><img style='vertical-align: middle' width=20 height=20 src='icons/txtmenu.gif' border=0 hspace=3>Text Folders</div>
           <span class='options' id='sub1'>
            <div id='firstDiv'>
               <div id="childb" class='option' onmouseover="getDiv(this)" onmouseout="this.style.background='#f5f5f5'">
               <a href='http://www.google.com'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
                           <div id="test"></div>
               <div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">
               <a href='http://www.industriavirtual.com.br/master.asp?code=webpacks&subcode=basico'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
   
               <div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">
               <a href='http://www.google.com'><img style='vertical-align: middle' width=16 height=16 src='icons/txtfolder.gif' border=0 hspace=3>Text Links</a></div>
      </div>
    </span>
  </body>
</html>
0
 
JonMnyAuthor Commented:
Not exactly what I wanted. I need to create a new div within the  <div id='masterdiv'>. It works on simple pages but when I try to do it in a nested page like this I get errors...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.