Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to insert a DiV in to document

Posted on 2003-12-01
3
Medium Priority
?
347 Views
Last Modified: 2012-05-04
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...




0
Comment
Question by:JonMny
3 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9853003
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
 
LVL 9

Author Comment

by:JonMny
ID: 9853509
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
 
LVL 10

Accepted Solution

by:
NetGroove earned 0 total points
ID: 9856500
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question