appendChild vs. innerHTML

choose you one and tell me why?



or





In general, appendChild is much faster when used responsibly. Here's a good benchmark test to test for yourself: http://jsperf.com/appendchild-vs-innerhtml2/6

By responsible I mean use it as long as you do not have the direct DOM manipulation.  Whenever you call appendChild() on a live DOM element, it tells the engine of browser to recalculate and repaint the entire page.

In your example, you are the direct DOM manipulation.

Whenever the for loop iteration, it redraws the page.  You have only 20 iterations, but that if it was 20 000?

Instead, build your entire document except for the live DOM element and then repaint unique when you're done, like this:

var div, container = document.createElement("div");

for (var i = 0; i <= 20; i++) {
    div = document.createElement("div");
    div.innerText = i;
    container.appendChild(div);
};

document.getElementById("content").appendChild(container);

Make sense?

Tags: BlackBerry Developers

Similar Questions

  • IE/ExternalInterface doesn't return any value if added with appendChild film

    There is a problem with IE/ExternalInterface if the movie is added to the DOM appendChild f.ex. JavaScript functions are called, but they do not return any value.

    First response was this is 3rd part/Adobe issue.

    This fixation with innerHTML is not the solution. Here, using suggestions?

    Simplified test cases has

    " flashMovie var = ' < OBJECT id ="testId"codeBase ="http://fpdownload.

    / / Works in IE and FF

    document.getElementById("testdiv").innerHTML = flashMovie.

    / / ExternalInterface.call("saveglobalscore",score) call JS but does not return a value in Internet Explorer. Works in FF

    var tempDiv = document.createElement("div");   

    tempDiv.innerHTML = flashMovie.

    document.body.appendChild (tempDiv);

    Here's the complete code

    http://pastebin.com/fbc0aa9a

    Here's the AS3 code for ajax.swf

    http://pastebin.com/d4efd47b

    H

    That did the trick - the sequence of adding objects in html format (works in both browsers for me):

    var tempDiv = document.createElement ("div");

    first add div DOM

    document.body.appendChild (tempDiv);

    then adds html div

    s = tempDiv.innerHTML;

    In addition, your swf get error when they are not incorporated. You should always check it ExternalInterface is available:

    {if (ExteralInterface.available)}

    No matter what

    }

  • createElement vs. innerHTML

    you use and why?

    Do not repeat everything you could have look more closely to the same question, and the really good anser here since it is a very good answer why using 'createElement': http://stackoverflow.com/questions/2946656/advantages-of-createelement-over-innerhtml

  • innerHTML does not not on my 9810?

    Hello

    I'm new to the WebWorks development and try my first JavaScript program. I have the following call does not work on my 9810. It works very well in the ripple (and the Chrome browser), but not on my real device. When you click on the text "Click here", the phrase "Hello World" should appear. In my 9810 I tried both using the navigation pad click on as well as touch the screen but nothing happens in both cases.

    Any suggestions?

    Thank you

    index.html

    
        
            
            
        
    
        
            

    Hello World 2

    Click Here.

    Click.js

    function hello()
    {
        document.getElementById('hello').innerHTML = 'Hello World';
    }
    
    function start()
    {
        document.getElementById('click').onclick = hello;
    }
    
    window.onload = start;
    

    Hi Tim,.

    Thanks for the reply. I realized what I was doing wrong today. Something very stupid. I did include my Javascript file in the file to archive WebWorks. If the app was looking for a .js file that does not exist.

    Packager should not give a warning or error if she sees a reference to a .js file in the html and the file is not in the file to archive?

    Thank you

  • Entry text box loses focus after setting the innerHTML

    I'm trying to change my widget so that it supports the search when you type.

    But when my javascript event fires to submit ajax request entry box retains loses focus.  I tried to reset the focus after writing the html code with blackberry.focus.setFocus (), but this function sets the cursor at the beginning of the entry rather than at the end zone, so I can continue typing.

    Is it possible to update the html code in a DIV without losing the focus on my entry box, or there at - it a way to make the blackberry.focus.setFocus () to go to the end of the string currently in the box?

    Here is an example of the code that I am trying to work in my 9700 Simulator:

    ------ JS Code---function doLiveSearch(str) {  if (str.length==0) {    document.getElementById("results").innerHTML="";    return;  }   xmlhttp=new XMLHttpRequest();  xmlhttp.onreadystatechange = function() {   if (xmlhttp.readyState==4 && xmlhttp.status==200) {    document.getElementById("results").innerHTML=xmlhttp.responseText;     blackberry.focus.setFocus("search");    }  }  xmlhttp.open("GET","livesearch.php?q="+str,true);  xmlhttp.send();}
    
    ------- HTML Code-----
    ----here's an example what my lookup code returns.----
    One
    Two

    Try with selectionStart and selectionEnd before focus:

  • Slow InnerHTML

    Hello

    I have a widget that is currently about 150 cases of reading an sqlite table and building a drop-down list with the following options in.

    At the minute, it takes about 15 seconds to build this list by using innerHTML, is anyway to increase performance on that?

    Thank you

    Hello

    You add each file individually to the page using statements individual innerHTML, or create the complete table in JavaScript, and then by an innerHTML?

    Whenever you make a request to change the DOM, it adds overhead to page rendering performance (as each request invokes a refresh of the page layout).  Instead, it is recommended that you generate your HTML table first (add a JavaScript string) and then view the results in a statement unique innerHTML.

    The following thread contains some tips on improving the performance of SQLite queries:

    http://supportforums.BlackBerry.com/T5/Web-development/speeding-up-Google-Gears-SQLite/m-p/486009

    There may be some useful tips of information here for you.

    See you soon,.

    Adam

  • Cannot install flash player, download run script error: could not set correctly - undefined reference innerHTML or zero

    Unable to download/install Flash Player, download script error: cannot properly set innerHTML reference undefined or null

    Hello

    The script error is caused by the DPI setting on your system.  If the DPI setting is set to 100%, 125%, 150% or 200% Setup returns the script error. If your DPI setting is set to something else, please set it to one of these and Setup online should work.  To check/change the DPI setting:

    1. Start the control panel and go to control Panel\All Control Panel Items\Display
    2. In the left menu, select set size custom text (PPP)
    3. In the Windows Setup custom DPI select 100%, 125%, 150% or 200% in the menu drop-down
    4. Click OK
    5. Select apply
    6. Open a session/disable
    7. Online installer should now run without displaying the script error.

    A fix for this should be released in the coming weeks.

    --

    Maria

  • XMLDOM.appendChild performance

    I need to process a large xml (52 000 messages under the root element). There are 3 items under each Message element. Example: -.
    < root >
    < message >
    < customer > 14434 < / customer >
    Mamadou < MessageType > < / MessageType >
    < Key > 2343 < / key >
    < / message >
    < message >
    < customer > 14434 < / customer >
    Mamadou < MessageType > < / MessageType >
    < Key > 2143 < / key >
    < / message >
    < / root >

    I have check the 3 values on a table and add two values as follows
    < root >
    < message >
    < customer > 14434 < / customer >
    Mamadou < MessageType > < / MessageType >
    < Key > 2343 < / key >
    < value > 7689 < / value >
    < hits > 1 < / Hits >
    < / message >
    < message >
    < customer > 14434 < / customer >
    Mamadou < MessageType > < / MessageType >
    < Key > 2143 < / key >
    < value > 9 < / value >
    < hits > 98797 < / Hits >
    < / message >
    < / root >

    Note: There are elements of 'Message' 58000 in my test

    The entry arrives at the proc as a CLOB

    The message of the analysis and queries to extract the 'Value' and 'Hits' takes about 2 minutes, which is acceptable.
    However, when I added two statements appendChild adds value and Hits, the execution time turned up 10 ~ 12 minutes.

    Any ideas on how to run faster?
    Is there a problem with XMLDOM.appendChild?


    DB version: Oracle Database 11 g Enterprise Edition Release 11.2.0.3.0 - 64 bit

    Note:-J' posted this query Re: XMLDOM.appendChild performance and asked me to check into the XML DB forum.

    on the other post, I was also told that XMLType is the one I need to use g 11 but my insert in a table of XMLType of the CLOB itself takes hours.

    This conversion problem is very strange.
    Have you tried to investigate the possible causes? Where time is spent, the memory consumption etc.

    The other approach here is, you can try:
    In my opinion, the requirement clearly dictates to process the document in the form of relational data, so that he could be joined to the base table data.
    A MERGE statement seems appropriate in this case, with a temporary table to hold the parsed data.

    create global temporary table tmp_xml of xmltype;
    
    create global temporary table tmp_customerdata (
          col01  varchar2(300)
    ,     col02  varchar2(300)
    ,     col03  varchar2(300)
    );
    

    The test document contains 50,000 items and CUSTOMERDATA table 25,000 lines that correspond to half of the messages from the XML file.
    The updated document is regenerated from scratch by joining the temporary table and the table updated base.

    DECLARE
    
      v_doc      clob;
      v_new_doc  clob;
    
      ts_start   timestamp := systimestamp;
    
      -- a little trace proc :)
      procedure trace_time (mess in varchar2) is
        tmp  timestamp := systimestamp;
      begin
        dbms_output.put_line(rpad(mess,30) ||' : '|| (tmp - ts_start));
        ts_start := tmp;
      end;
    
    BEGIN
    
      select doc into v_doc from testclob;
    
      trace_time('CLOB fetch');
    
      insert into tmp_xml values( xmlparse(document v_doc) );
    
      trace_time('XMLType insert');
    
      insert into tmp_customerdata (col01, col02, col03)
      select x.col01, x.col02, x.col03
      from tmp_xml t
         , xmltable('/Root/Message'
             passing t.object_value
             columns col01 varchar2(300) path 'Customer'
                   , col02 varchar2(300) path 'MessageType'
                   , col03 varchar2(300) path 'Key'
           ) x
      ;
    
      trace_time('XML data parsing');
    
      /*
        Merge XML data into CUSTOMERDATA table
        */
      merge into customerdata t
      using (
        select col01, col02, col03
        from tmp_customerdata
      ) v
      on ( v.col01 = t.col01
           and v.col02 = t.col02
           and v.col03 = t.col03
           and t.groupid = '10' )
      when matched then update
       set t.col05 = t.col05 + 1
         , t.col06 = to_char(sysdate, 'YYYY-MM-DD HH24:MI:SS')
      when not matched then insert
       (groupid, col01, col02, col03, col04, col05, col06)
       values (
         '10'
       , v.col01
       , v.col02
       , v.col03
       , sq_value.nextval
       , '1'
       , to_char(sysdate, 'YYYY-MM-DD HH24:MI:SS')
       ) ;
    
      trace_time('Data merging');
    
      /*
        Generate the updated XML document
        */
      select xmlserialize(document
               xmlelement("Root",
                 xmlagg(
                   xmlelement("Message",
                     xmlforest(
                       t.col01 as "Customer"
                     , t.col02 as "MessageType"
                     , t.col03 as "Key"
                     , t.col04 as "Value"
                     , t.col05 as "Hits"
                     )
                   )
                 )
               )
             )
      into v_new_doc
      from tmp_customerdata t
           join customerdata c on c.col01 = t.col01
                              and c.col02 = t.col02
                              and c.col03 = t.col03
                              and c.groupid = '10'
      ;
    
      trace_time('Generating new document');
    
    END;
    /
    

    The block runs in about 26 seconds (could be further optimized with indexes).
    Output:

    CLOB fetch                     : +000000000 00:00:00.000000000
    XMLType insert                 : +000000000 00:00:11.310000000
    XML data parsing               : +000000000 00:00:03.073000000
    Data merging                   : +000000000 00:00:07.020000000
    Generating new document        : +000000000 00:00:04.368000000
    
  • using innerHTML to change the values of a textfield does not?

    I was wondering why this line is not working on a text field...

    document.getElementById('P1_Name').innerHTML = "invalid error";

    If P1_Name is a Text_field it does not work...

    but

    If P1_Name is a component TextArea, it works...

    No idea how to get around this problem...


    * I'll probably use pl sql, but just wonder why this will not work until this is strange for me.

    PandaOracle wrote:
    I was wondering why this line is not working on a text field...

    document.getElementById('P1_Name').innerHTML = "invalid error";

    If P1_Name is a Text_field it does not work...

    The content model for "text fields" (input type = 'text' elements) is 'empty', i.e. the element is not a container for other content. Like innerHTML property that is the content of an element - nodes HTML and the text it contains, it is not valid for the input elements.

    If P1_Name is a component TextArea, it works...

    Content model of "text boxes" (textarea elements) is 'text': the element is a container for text nodes. So its innerHTML property can be used to get and set the content of this text.

    No idea how to get around this problem...

    input elements have a value attribute rather than the text content. The property equivalent value can be used to get and set this in JavaScript:

    document.getElementById('P1_Name').value = 'Error not valid';
    
  • appendChild does not work properly?

    I have an xml file:

    < filmlist >

    < user num = "1" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < user num = "2" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < / filmlist >

    At first I read this file, count the number of tags 'user' and want to add a tag 'user' next, then he should look like this:

    < filmlist >

    < user num = "1" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < user num = "2" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < user num = "3" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < / filmlist >

    To do this, I use:

    var loadedXML:XML = new XML (event.target.data);

    newUser = loadedXML.user.length () + 1;

    var str:String = ' < user num =' ' + (newUser) + "' > \n";

    //

    for (var s:int = 0; s < selectedMovies.length; s + +)

    {

    Str += '< film >' + selectedMovies [s] + ' < / film > \n ";

    }

    //

    Str += ' < / user > ';

    loadedXML.appendChild (new XML (str));

    //;

    xmlToSend = new XML (loadedXML);

    The xmlToSend object that I send to my php script:

    <? PHP

    If (isset ($GLOBALS ["HTTP_RAW_POST_DATA"])) {}

    $data = $GLOBALS ['HTTP_RAW_POST_DATA'];

    $file = fopen ("filmpjes.xml", "w");

    fwrite ($file, $data);

    fclose ($file);

    If (! $file) {}

    ECHO ("< stuff > Server cannot create the file. < naming > ");"

    } else {}

    ECHO ("< stuff > saved file.") < naming > ");"

    }

    } ? >

    The strange thing is, when I trace xmlToSend just prior to my php script shows correctly:

    < filmlist >

    < user num = "1" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < user num = "2" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < user num = "3" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < / filmlist >

    When the php script registers the new XML however, appendChild does not seem to have worked ok. Instead of adding a tag 'user' next ' there replace the last one (2) with the new, if it looks like this.

    < filmlist >

    < user num = "1" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < user num = "2" >

    clip02.FLV < film > < / film >

    clip01.FLV < film > < / film >

    clip01.FLV < film > < / film >

    < / user >

    < / filmlist >

    I did something wrong with appendChild? Which makes it look ok when I trace the XML xmlToSend object, but written with always the last node replaced rather than add a node?

    There's no problem with your code.  It will do what you want.

    use different code to add something new and unique user number '3' to make sure you are checking the correct server file and not looking at some cache file.

  • change the text with javascript innerhtml

    OK, so I have got it working somewhat, but cannot change more than once. I have 3 radio with a primary default buttons and view the value of this main button, which is $ 9.99. I want to change the $9.99 to $15.98 for the second button radio and $20.98 for the third option and back again to the radio etc. 1 and 2 button box.

    Here is my code

    < script type = "text/javascript" >

    function changeText1() {}

    document.getElementById('buy-1x-power-out').innerHTML = '$9.99 USD';

    }

    function changeText2() {}

    document.getElementById('buy-2x-power-out').innerHTML = '$ $15';

    }

    function changeText3() {}

    document.getElementById('buy-3x-power-out').innerHTML = ' $ USD 20,47 ';

    }

    < /script >

    < name of the form = the "power-out-form" method = "post" action = "" >

    < p >

    < label >

    < input name = "power-out-buy-selection" type = "radio" id = "power-out-buy-selection_0" value = "$9.99 'checked onclick =' changeText1 () ' >"

    1 @ $9,99 $ < / label >

    < br >

    < label >

    < input type = "radio" name = value 'power-out-buy-selection' =' $15.98 ' id = 'power-out-buy-selection_1' onclick = 'changeText2 ()' >

    2 @ $7.99 USD (20% discount) < / label >

    < br >

    < label >

    < input type = "radio" name = "power-out-buy-selection" id = 'power-out-buy-selection_2' onclick = 'changeText3 ()' value =' $20.97 ' >

    3 @ $6.99 USD (30% reduction) < / label >

    < br >

    < /p >

    < / make >

    total < p > < /p > < id p 'buy-3 x-power-out' = >$ 9.99 USD < /p >

    Thank you

    Total subsection ID is buy-3 x-power-out, but your functions try to change 1 - buy x-power-out and buy 2 x-power-out. Because they do not exist, the total does not change.

    Each function must target the same ID:

    function changeText1() {}

    document.getElementById('buy-__3__x-power-out').innerHTML = '$9.99 USD';

    }

    function changeText2() {}

    document.getElementById('buy-__3__x-power-out').innerHTML = '$ $15';

    }

    function changeText3() {}

    document.getElementById('buy-3x-power-out').innerHTML = ' $ USD 20,47 ';

    }

    In fact, it would be simpler to use an ID such as total.

  • Add dynamic html - InnerHTML as implementation of the components of the Adf.

    Hello

    I need to view the html code on the jsff page which is backing bean.

    I need to display html code on page jsff dynamics. I'll put the html code in a requestMap attribute that must be added and displayed on the jsff page.

    For example,.
    BackingBean
    requestMap.put ('DetailText', ' < p > This is sample text for description < /p > < img src=\"test.png\" > "");

    JSFF Page
    < af:panelGroupLayout layout = "vertical" >
    < af:outputText value = "#{requestScope.DetailText}" / >
    < / af:panelGroupLayout >


    Above code is the hardcoded value display / plain html code.

    I need to do something like innerHTML style in the components of the adf.

    Is it possible to apply this? help you enjoy!

    Hello

    This would require JavaScript and the access to the HTML code that is generated in the user interface. For example usually the content of a component is represented by an element with the ID of the componentId::content HTML. In this way it can be found on the DOM using findElementById. However, this isn't really a future prove way and fights the idea of development based on the JSF components when you make a hypothesis on the output stream. So was wondering if using f: verbatim for the included HTML help

    Frank

  • XML.appendChild ();

    How to add a child to an empty xml.

    var myXML:XML = new XML();
    var myOtherXML:XML = <Greeting> Hi <Greeting>
    var myOtherXML2:XML = <Name> James <Name>
    
    myXML.appendChild(myOtherXML) //TypeError: Error #1088: The markup in the document following the root element must be well-formed.
    myXML.appendChild(myOtherXML2)//TypeError: Error #1088: The markup in the document following the root element must be well-formed.
    

    Basically, I want to combine two xml files in an xml file that is not a root. Is this possible?

    the fact that they lack of "/" is not the problem

    .. .well this is the reason why you got these errors

    You want to create is not an XML but a XMLList.

    var myXMLList:XMLList = new XMLList();
    myXMLList[0] = myOtherXML;
    myXMLList[1] = myOtherXML2;
    trace(myXMLList);
    

    Trace

    Hi
    James
    

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.UK/

  • equivalent innerHTML

    Hi everyone I need your help (sorry for my English)

    Let's say I have this element:

    < mx:VBox id = "test" click = "insertMxml (event)" >

    < / mx:VBox >

    And I want to insert mxml inside dynamically when the user clicks on the element or do something else on the page.

    in javascript, I'll simply write:

    < script >

    insertHTML() {} function

    test.innerHTML = 'myHTML <>stuff.

    }

    < /script >

    < mx:script >

    public void insertHTML(event:MouseEvent):void {}

    what I would do in flex...?

    }

    < mx: / script >

    Thanks much head!

    You cannot add 'mxml' when running, but since mxml is indeed pure AS3, you can. Use the AddChild method to do this.

    ...

    private void insertMxml(evt:Event):void

    {

    var myComp:MyCustomComp = new MyCustomComp();

    evt.target.addChild (myComp);

    }

    You can do this as simple or as complex as you want. The easiest way is to make a custom component and add an instance of it to a Visual container (in this case, a VBox).

    You can delete childs by using methods such as removeChildAt removeAllChildren...

    Dany

  • Is there a way to make innerMXML (a bit like innerHTML in js)?

    I have a case where an important part of the Flex page should be redesigned with different widgets, layout and data with certain actions of the user. I can do it in ActionScript, but then I'll need to go through the tedious controls instantiation in actionscript, adding properties and then adding them to the DOM application. DHTML, there is a very convenient way to do this either innerHTML allows you to set a string of HTML and the browser will automatically create DOM objects out of it.

    I'm looking for an innerMXML or something like that who take the string MXML and automatically create controls etc out of it and place them in the DOM of application. Is this possible with ActionScript 3.0? This feature is planned for the future?

    No, there is no way to do that with Flex. This is possible in HTML for a browser is to analyze and make the HTML. Flash Player knows nothing about MXML. The only way to achieve this would be to create your own MXML parser and renderer in ActionScript, which is not a good idea.

Maybe you are looking for

  • Can I use a synchronization between Firefox on Windows 7 and Aurora on Kindle?

    I have put in place on Firefox 27.0 Sync on my Windows 7 computer and I want to synchronize with Aurora 29.0a2 on my Kindle tablet. In Aurora on the Kindle I select 'Settings-> Sync' then tap 'Get Started' on ' you already have an account? Sign in» W

  • Using the HP G7000 recovery partition

    Hi people I have a laptop G7000. About 4 years ago, I ran the recovery utility to fundamentally reset the mobile entity. My question is, can I do it using the same partitioned recovery files? Computer laptop becomes just a little cluttered, and I wan

  • XP main drive c buddy rough and inaccessible

    I have System NTFS hard disk C. I started my computer and it gets restarted in the middle of loading windows xp. I have connected this faulty drive to another work. All partitions at the opening were working except C that he showed as raw without ind

  • Windows Media Player 11 will not show "Protected" column

    I'm checking the DRM protection / my music but I can't seem to understand in what display I can get the "Protected" column to display. I thought it was in the songs (on the left under library) in the Details view, but when I click with the right butt

  • Scanning of Pages in a single Document

    I have a HP 6500 E709 printer - was able to scan multiple pages in like a scan, but now it won't. The place (small box to click to activate) to designate on the details screen (one where you can appoint doc, indicate where to store, modify configurat