how to generate variable ids for html tags inside append function in jquery

Question

this is my code and i want to generate variable ids for the html tags inside the append function while the ids are generating outside where variables are declared but its not taking inside ..

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery Bind onclick Event to Dynamically added Elements</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="scriptj.js"></script>
    <script type="text/javascript">
        i=0;
        $(document).ready(function(){
            $("#add").click(function func(){
                ++i;
                console.log(i);
                var rem = 'remove' + i; //  here the ids are generating but they 
                var tblid = 'id' + i;   // not going inside append function
                var imgdiv = 'idiv' + i; 
                var imag = 'img' + i;
                $("#diva").append("<div id=tblid style='border:2px solid black; border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' id=rem >Delete</a></td></tr></table><table  align='center'><tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr><tr><td>Descrtiption</td><td><textarea rows='5' cols='162' style='border-radius:5px;'></textarea><td></tr></table><br>&nbsp &nbsp<input type='file' onchange='readURL(this);'/><div id=imgdiv style='border: 1px solid black'><img id=imag alt='your image' /></div></div><br>"); 
            });
            $(document).on("click", "a#rem" , function() {  
                $(this).parent().parent().parent().parent().parent().remove();  
            });
        }); 
    </script>
    </head> 
    <body>
        <table><tr><td><button id="add" style='border-radius:3px;'>Add Section</button></td></tr></table>
        <br>
        <div id="diva">

        </div>
    </body> 
    </html>

You are expecting magic my friend. The argument for the append method is a string. Do you expect the variable names to magically get replaced by their values? — aa333
– aa333, Commented Dec 27, 2015 at 3:22

el3ati2 · Accepted Answer · 2015-12-27 03:26:06Z

2

You are not calling the variables in your code. They are being interpreted as string.

For example, in this part of your code:

 $("#diva").append("<div id=tblid style='border:2px solid black; ....

tblid is being considered as a string and not as a variable. You need to concatenate strings and variables, like so:

$("#diva").append("<div id=" +tblid+ " style='border:2px solid black; ...

answered Dec 27, 2015 at 3:26

el3ati2

4954 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shyju · Accepted Answer · 2015-12-27 03:22:16Z

Use the variables when you build the markup.

  var rem = 'remove' + i; //  here the ids are generating but they 
                var tblid = 'id' + i;   // not going inside append function
                var imgdiv = 'idiv' + i; 
                var imag = 'img' + i;

  var m ="<div id='"+tblid+"' style='border:2px solid black; 
           border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' 
          id='"+rem+"' >Delete</a></td></tr></table>
        <table  align='center'>
        <tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr>
        <tr><td>Descrtiption</td><td><textarea rows='5' cols='162' 
        style='border-radius:5px;'></textarea><td></tr></table>
        <br>&nbsp &nbsp<input type='file' onchange='readURL(this);'/>
        <div id='"+imgdiv+"' style='border: 1px solid black'>
        <img id='"+imag+"' alt='your image' /></div></div>"; 

 $("#diva").append(m);

But, you don't always need to set these id's. You can always get the relative items using closest() ,find() methods. If you want to keep some data you want to send, Keep that in html 5 attributes.

Hemal · Accepted Answer · 2015-12-27 04:33:13Z

1

You should write your .append() like this because you are concatenating a variable.

$("#diva").append("<div id='" + tblid + '>");

answered Dec 27, 2015 at 4:33

Hemal

3,7722 gold badges27 silver badges57 bronze badges

Collectives™ on Stack Overflow

how to generate variable ids for html tags inside append function in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related