Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2005
    Location
    Los Angeles
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy My appendChild anchor fails to insert inside my new firstChild div.

    This script is part of an elaborate script (buildNav) that creates navigation for all of my pages. I created styling and isolated this script into its bare essentials in order to troubleshoot it. I know how to use the insertBefore and appendChild functions as they work just fine for all other parts of my buildNav. My createAnchor function also works just fine for all other parts of my buildNav. The problem is that when I append a named anchor into my newly created first-child div it gets inserted outside of the div instead. This script produces no errors on MSIE 6.0, Firefox 1.5, and Opera 8.51 all running on Windows XP.

    The goal of my script is to create the following HTML as a firstChild of the body tag.

    <DIV class="newfirstchild"><A name="mytop" class="myanchor">this text should be lime and appear inside lime box</A></DIV>

    The complete HTML is:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <HTML><HEAD><TITLE>Prototype - PAGEBUILDER</TITLE>
    <SCRIPT>
    window.onload = initPage;
    function initPage(){buildNav();}
    function buildNav(){
    if (!document.getElementById('pc') || !document.createElement) return true;
    var docBody = document.getElementById('pc');
    topAnchor(docBody);
    }
    function topAnchor(NODE){
    var firstDiv = NODE.insertBefore(document.createElement('DIV'),NODE.firstChild);
    firstDiv.className = 'newfirstchild';
    createAnchor(NODE,'','this text should be lime and appear inside lime box','myanchor','mytop');
    }
    function createAnchor(NODE,HREF,TEXT,ACLASS,NAME){
    var theAnchor = NODE.appendChild(document.createElement('A'));
    if (HREF!=null && HREF!='') theAnchor.href = HREF;
    if (TEXT!=null && TEXT!='') theAnchor.appendChild(document.createTextNode(TEXT));
    if (ACLASS!=null && ACLASS!='') theAnchor.className = ACLASS;
    if (NAME!=null && NAME!='') theAnchor.name = NAME;
    }
    </SCRIPT>
    <STYLE>
    DIV.newfirstchild{width:450px; height:20px; border:solid #0F0 1px;}/*this tests if new DIV inserts as first-child*/
    DIV.newfirstchild A.myanchor{color:#0F0;}/*myanchor appears lime if it successfully inserts inside new DIV*/
    A.myanchor{color:#F00;}/*myanchor appears red if it fails to insert inside new DIV*/
    </STYLE>
    </HEAD><BODY ID="pc">
    <DIV><H4>Header inside 1st child</H4><P>Blah blah blah.</P></DIV>
    <DIV><H4>Header inside 2nd child</H4><P>Blah blah blah.</P></DIV>
    </BODY></HTML>

    I really do appreciate the help offered as this is evident in the countless hours that I spend with others in instant messaging helping them with Windows troubleshooting. However, please test your solution before providing one. If you cannot provide an adequate answer to my query please do not respond to this posting. Useless responses tend to make postings long, difficult to follow, and old. Thank you for your cooperation.
    Sincerly,

    Jules

    Don't get left behind. Peel out the behaviour layer from presentation and structure. Throw your DHTML head first into the woodchipper and deprecate it. My mission statement... Unobtrusing the DOM for world peace. ;)
    .

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Just glancing at your code, you are appending the child to the parent and not the div so that is why it is not in the div.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Dec 2005
    Location
    Los Angeles
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Everyone:

    This problem was solved by Fang at WebDeveloper.com. It was a very minor logic error.
    Sincerly,

    Jules

    Don't get left behind. Peel out the behaviour layer from presentation and structure. Throw your DHTML head first into the woodchipper and deprecate it. My mission statement... Unobtrusing the DOM for world peace. ;)
    .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •