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 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript to insert divs into the HTML


    Hello everybody, this is my first post overhere:

    Im using javascript to insert divs into the HTML, say.. 10 divs, and Im trying to give each DIV its own "id" :

    Code:
    function mf() 
    {
    var i=0,x="";
    while (i<10) 
    {
    x=x + '<div id="a"' + i + '>this is the #' +i+ 'time</div> ';
    i++;
    }
    document.getElementById("down").innerHTML=x;
    
    }
    its working, but the ID is messed up..
    it shows id="a"3
    can anyone tell me how to make it id=a1..2..3 ?
    thank you.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Look at this part of the code
    Code:
    '<div id="a"' + i
    So after i has been converted into a string it will be appended to <div id="a". The result for i==3 will be <div id="a"3
    Try this
    Code:
    x=x + '<div id="a' + i + '">this is the #' + i + 'time</div>';

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Excellent, thank you!
    Altough I dont really understand how you handled the "'s..

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You'll have to think about outer and inner quotes (in pairs of course). If the resulting string has errors, first omit the outer quotes and replace inner variables with a value

    Example:
    Code:
    // ' is the outer quote
    '<a href="mypage"' + i + '"_tst.html">a link</a>'
    
    // omit outer quotes (on paper not in code), replace inner variable with a value (e.g. 5)
    <a href="mypage"5"_tst.html">a link</a>
    
    // aah the two inner double quotes should not be there, resulting code
    '<a href="mypage' + i + '_tst.html">a link</a>'

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    EDIT: this is an outdated response
    Last edited by devnull69; 09-28-2012 at 07:03 AM.

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Ill work on that.
    Thank you very much

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    There isn't much point in giving the divs ids if you are inserting them that way because the JavaScript will not be able to use the divs subsequently to interact with the generated code because JavaScript interacts with the DOM version of the page and innerHTML only updates what is displayed and not the actual document that the JavaScript sees.

    If you want to be able to actually interact with those divs from JavaScript after creating them then you'd have to use the proper JavaScript DOM commands to create them instead of innerHTML.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    can you clarify a little felgall, because from my understanding of what you are saying, this shouldn't work...
    Code:
    <body>
    <div id="base"></div>
    <script>
    document.getElementById("base").innerHTML="<div id='test'></div>";
    document.getElementById("test").innerHTML="hello";
    </script>
    </body>
    Last edited by xelawho; 09-27-2012 at 10:08 PM.

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    xelawho's example works perfectly on current Firefox and Chrome as well as IE8

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    ... which is why I asked. I'm struggling to find any DOM interaction that you can't perform on a div created using innerHTML:

    Code:
    <body>
    <div id="base"></div>
    <script>
    document.getElementById("base").innerHTML="<div id='test'></div>";
    setTimeout(function(){document.getElementById("test").innerHTML="hello";},1000)
    setTimeout(function(){document.getElementById("test").style.backgroundColor="red";},2000)
    setTimeout(function(){document.getElementById("test").id="change";
    document.getElementById("change").style.backgroundColor="blue";
    },3000)
    setTimeout(function(){
    inp=document.createElement("button");
    inp.innerHTML="button"
    document.getElementById("change").appendChild(inp);
    },4000)
    setTimeout(function(){document.getElementById("base").children[0].style.backgroundColor="green"},5000)
    setTimeout(function(){document.getElementsByTagName("div")[1].style.backgroundColor="yellow"},6000)
    setTimeout(function(){document.getElementById("base").removeChild(document.getElementById("change"))},7000)
    </script>
    </body>
    like you say, FF, Chrome and IE8 have no problems with the above. Maybe some other browser?

  • #11
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you guys,
    So are you saying I *should* give id's to the divs?
    Will I be able to interact with them after they're created?

    Sorry for the late response, cant seem to make it so I get an email when some one responds to my question.. -/

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    What I'm saying is that I can't think of anything that you would want to do to a div that you can't do if you give them IDs and create them the way you are doing. If felgall ever elaborates maybe he will have an example of something you can't do with elements created via the innerHTML method.

    The other way to do it is outlined in the examples starting here, in case you are interested.

    or more specifically, in your case:
    Code:
    var i=0;
    while (i<10) {
    var thediv=document.createElement("div")
    thediv.id="a"+i;
    thediv.appendChild(document.createTextNode('this is the #' +i+ 'time'));
    document.getElementById("down").appendChild(thediv);
    i++;
    }
    Last edited by xelawho; 09-29-2012 at 05:52 PM. Reason: added example

  • #13
    New Coder
    Join Date
    Sep 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Im not at that level but I sure will study this.
    Thank you.


  •  

    Posting Permissions

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