www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] insertBefore() acts like appendChild()

  1. #1
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192

    resolved [RESOLVED] insertBefore() acts like appendChild()

    At the click of a button I want to insert an element BEFORE the currently selected element. I handle "selected" by storing the last clicked element ID in a variable.

    My code:

    initialise.js
    PHP Code:
        (function()
        {
            
    main.page parent.document;
        }
        )();

        
    /** 
         *
         *        Easier than console.log();
         *
         */
        
    function echo(string)
        {
            
    console.log(string);
        } 
    item_document_elements.js
    PHP Code:
        // Example of the 2 parameters:
        // controls.inserting_this = "canvas"
        // select_element.selected = "default_div"    
        
        
    main.page.getElementById("new_element_go").addEventListener
        
    (
            
    "click"
            function()
            {
                
    controls.insert_before(controls.inserting_thisselect_element.selected);
            }, 
            
    false
        
    );
        
        
    controls.insert_before = function(elementselected)
        {    
            echo(
    "DEFINITELY INSERTING BEFORE");
                
            var 
    id   main.page.getElementById("new_element_id_input");
            var 
    name main.page.getElementById("new_element_name_input");
                
            
    // Return false if the input field is empty.
            
    if(id.value == "" || id.value == null || id.value == "undefined")
            {
                
    id.style.color "#F00";
                
    id.value "ID required";
                
    id.focus();
                    
                  return 
    false;
            }
                
            
    // Check if the element ID is in the array.
            // If indexOf returns -1, it doesn't exist.
            
    if(create.element_array["name"].indexOf(id.value) != -1)
            {
                
    id.style.color "#F00";
                  
    id.value "ID already exists";
                  
    id.focus();
                    
                  return 
    false;
            }
            else
            {
                var 
    master_parent  main.page.getElementById(selected).parentNode;
                var 
    create_element main.page.createElement(element);
                    
                  
    create_element.id         id.value;
                  
    create_element.style.border "1px solid black";
                  
    create_element.style.width  "auto";
                  
    create_element.style.height "auto";
                  
    create_element.textContent  "New " element;
                    
                  
    // Add element to array of elements in the document.
                  
    create.element_array["name"].push(id.value);
                  
    create.element_array["name"]["properties"].push(new element_properties);
                    
                  
    master_parent.insertBefore(create_elementselected);    
            }
                
                
    // End blackout window and remove popup.
                
    controls.end_darkness();
            } 
    The document contains only the following:
    PHP Code:
        <div id="container" class="hovering selected" style="margin-right: auto; margin-left: auto; height: auto;">
            <
    div id="default_div" style="width: auto; height: 120px; border: 1px solid #999;"></div>
        </
    div
    The above code always inserts the new element AFTER the last one, never before. As far as I'm aware the function is being used correctly. If not, please advise.

    What am I doing wrong?

  2. #2
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Problem fixed. Error was a simple misuse of the insertBefore() function. The second parameter referenceElement is required to be a node, not simply an ID. The resolution:

    Code:
    master_parent.insertBefore(create_element, main.page.getElementById(selected));

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles