Click here to Skip to main content
15,881,838 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
HI,

I have Div Tag and i need to write the ID dynamically in DIV TAG. Here is the below sample code,

HTML
<div class = "popupButton" id =" "  önclick="Processing();">Processing</div>


Is there any javascript code to write div id inside the "ID" of DIV


Thanks

Dileep
Posted

This will do it - just set the element's .id property as needed.
Bear in mind you'll still need a way of accessing the div somehow. Here, I've
done it by (a) enclosing the targets in a container with an id (b) assuming that all elements in that container are a target so long as they are a div. You'll notice the first child div's id is overwritten and the remaining 3 are given an id for the 1st time.

HTML
lt;head>
<script>
function setIDs(parentIdStr, tagName)
{
  var parent = document.getElementById(parentIdStr);
  var nodes = parent.getElementsByTagName(tagName);
  
  var numNodes = nodes.length;
  var i;
  alert(numNodes);
  for (i=0; i<numNodes; i++)
  {
    var curNode = nodes[i];
    curNode.id = 'itemId'+(i+1);
  }
}
</script>
</head>

<body onload='setIDs("container", "div");'>
<div id='container'>
 <div id='div1'>1st div</div>
 <div>2nd div</div>
 <div>3rd div</div>
 <div>4th div</div>
</div>
<body>
</html>
 
Share this answer
 
Comments
dilzz 21-Aug-12 6:34am    
Sir, I have tried this , but it is not working. i have run this page and i just check the page source then there is no div ID were created.

Please advice me.

Thanks

Dileep
enhzflep 21-Aug-12 6:55am    
If you just check the page source, you won't see the change.
When in the browser, you need to be looking at the live html. I do this by right-clicking an element in Chrome then selecting 'Inspect Element'. This does indeed show that the ids have been set in the loop.
dilzz 21-Aug-12 7:23am    
Sir, I have checked the "Inspect Element" then i can see the ID Well....

But after assigning the id's with ur code, and then i clicked that Div the i can't get the ID that i assigned.

Here is the below code that am taking the div id,

$('#popupButton').html($(this).attr('id'));
alert($(this).attr('id'));

'popupButton' is the class name of that div.
when i alert the value, then it shows undefined...



Thanks
dilzz 21-Aug-12 7:32am    
Sir i got the Solution,

insted of this code,

$('#popupButton').html($(this).attr('id'));
alert($(this).attr('id'));

I have used the same code that u were given,


var parent = document.getElementById('IDContainer');
var nodes = parent.getElementsByTagName('div');
var curNode = nodes[0];

alert(curNode.id);

Thank you sir.. Thanks 4 ur great time to share the information

:)
If I follow you correctly, you need to assign some id dynamically to a div already created.

Whenever you declare a div without id, it will not be identified directly through id.
Well that doesn't mean, that javascript cannot identify it.
You can getallelements and iterate to get the div object.
But the problem is, there can be multiple div without id. So, though you can get the div object you cannot identify which one is which.

I presume, you use attribute to cater you requirements.
Or when you generate the aspx page, create the html on fy and set it in div object. Thus you can know the id while generating the html.

Here is a solution to assign id to div using jquery,
var idCount = 1;
$('div').each(function() {
   $(this).attr('id', 'div_' + idCount);
   idCount++;
});


Another solution in javascript,
You need to give an id to identify div;

var element = document.getElementById('div1');
element.setAttribute('id', 'div1');


Hope this helps.
cheers
 
Share this answer
 
Comments
dilzz 21-Aug-12 6:01am    
Sorry.. This is not working.. may b the way i used this code. can you please post full sample code.

Thanks

Dileep
Well, here is the full source

<div id="div1">sandip</div>
<input type="button" id="btn1" value="Change id" onclick="doBtnClick();"/>

<script type="text/javascript">
    function doBtnClick() {
        var element = document.getElementById('div1');
        element.setAttribute('id', 'div_new1');

        //check whether changed
        alert(document.getElementById('div_new1').innerHTML);
    }



cheers
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900