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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    342
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How To Undo CreateElement?

    Hi,
    I use createElement to create a bunch of elements, but I appendchild only the ones that fit certain condition. I have to createElement because I am testing certain fields inside the element.

    But if I let the elements stay around without appendchild on them, will it create problem? I can't find a function like removeElement. Is there a function like that?

    Many thanks.

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    obj = object.appendChild( obj );

    obj = object.removeChild( obj );
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    342
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    yes, I know this. But what if I did createElement without appendChild, then I want to remove this element?

    It seems that it's a waste of resource just to do appendChild and removeChild when I don't need to in the first place.

    Quote Originally Posted by SpirtOfGrandeur
    obj = object.appendChild( obj );

    obj = object.removeChild( obj );

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Javascript does reference counting of some sort. I'm sure Liorean can explain it in depth, but essentially if you say:

    var myElement = document.createElement("blabla");

    Then never use myElement, the actual object returned by createElement only has that single reference, myElement, attached to it. When it goes out of scope, JS should know to garbage collect it for you.

    So don't worry about it.

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    342
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, can I use myElement = createElement("something") over and over again to create new elements in the same scope?

    Now, it seems that there is another problem. I did a bunch of these createElement in the same function, and I assign image file names to the myElement.src.

    Now the image files just won't showup in browser. If I reload the page, it shows. It seems that browser retrieve the image files and they are in cache, but they just won't show.

    Do you know why?

    Quote Originally Posted by jkd
    Javascript does reference counting of some sort. I'm sure Liorean can explain it in depth, but essentially if you say:

    var myElement = document.createElement("blabla");

    Then never use myElement, the actual object returned by createElement only has that single reference, myElement, attached to it. When it goes out of scope, JS should know to garbage collect it for you.

    So don't worry about it.
    Last edited by dealmaker; 08-17-2005 at 07:12 AM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Because you haven't added it to the page - it's just in memory, not physically there.

    Once you've created your element, you add it to the page, using appendChild, or insertBefore, or whatever method is appropriate.

    createElement - creates an element, but does nothing with it
    appendChild - adds an element to the page
    removeChild - removes an element from the page
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Posts
    342
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    No, I did as I stated in my original post.

    Ok, this is a sample of what I do:

    Code:
    for(var i=0; i<5; i++) {
    
       img = document.createElement('img');
       img.src = imageFilesNames[i];
       
       isAppend = false;
    
       if(img.naturalWidth > 100 && img.naturalHeight > 100) {
    
          img.style.width = 100 + 'px';
          img.style.height = 100 + 'px';
          isAppend = true;
       }
    
       if(isAppend) {
           imgDiv.appendChild(img);   // imgDiv is pointing to a DIV tag that already exist in html
       }
    }
    It seems if I remove the naturalWidth/naturalHeight and the style assignment, the browser shows the images. If not, it doesn't show any and keep saying Waiting To Loading the images. If I appendChild before checking naturalWidth/naturalHeight and the style assignment, and removeChild after checking, the browser doesn't show any image because of removeChild. Same thing applies when I set img.style.visibility to 'hidden'.

    Any idea why? I use debugger and verify that naturalWidth & naturalHeight already exist after I assign the img.src.

    Quote Originally Posted by brothercake
    Because you haven't added it to the page - it's just in memory, not physically there.

    Once you've created your element, you add it to the page, using appendChild, or insertBefore, or whatever method is appropriate.

    createElement - creates an element, but does nothing with it
    appendChild - adds an element to the page
    removeChild - removes an element from the page
    Last edited by dealmaker; 08-17-2005 at 08:42 PM.

  • #8
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jkd
    Javascript does reference counting of some sort. I'm sure Liorean can explain it in depth, but essentially if you say:

    var myElement = document.createElement("blabla");

    Then never use myElement, the actual object returned by createElement only has that single reference, myElement, attached to it. When it goes out of scope, JS should know to garbage collect it for you.

    So don't worry about it.
    It is possible to delete the object too

    PHP Code:
    function deleteChildren (a_oNode) {
        
    //make sure to remove all child nodes from the element
        
    while (a_oNode.hasChildNodes()) {
            
    deleteChildren (a_oNode.lastChild); 
            
    delete a_oNode.removeChild(a_oNode.lastChild);
        }
    }

    deleteChildren (DomObject);
    delete DomObject

  • #9
    Regular Coder
    Join Date
    Jul 2005
    Posts
    342
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I just figured it out, it turns out that I have to use onload on each image to make sure that it's "completely" loaded before I tried to read or write any of it's internal variables.

    But the weird thing is that I can read all the internal variables of img element in the debugger without using onload.


  •  

    Posting Permissions

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