Dynamic div?

**ggd** · Mar 10, 2007 15:21

I'd like to know the simplest way to allow the user to type into a text box, press an add button, and have a new div created containing the text that was entered. Thanks in advance.

**Raju Gautam** · Mar 10, 2007 23:00

Hey does the following code helps you?:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function CreateTab(){
	if(document.getElementById('txtValue').value != ""){
		var tracker = document.createElement('div');
		tracker.style.position = 'relative';
		tracker.style.background = '#CCCCCC';
		tracker.style.border = '1px #000000 solid';
		tracker.style.width = '90px';
		tracker.style.cursor = 'pointer';
		tracker.innerHTML = document.getElementById('txtValue').value;
		tracker.style.align = 'left';
		tracker.style.height = '20px';
		tracker.setAttribute('onClick','GetString(\'hello world!!!\')');
		tracker.style.top = tracker.style.left = '0px';
		tracker.id = 'tab[]';
		document.getElementById('TabsCol').appendChild(tracker);
	}
}
function GetString(msg){
	alert(msg);
}
</script>
</head>
<body>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #006699 solid;">
  <tr>
    <td height="92" colspan="3" align="center" valign="middle" bgcolor="#006699">&nbsp;</td>
  </tr>
  <tr>
    <td width="145" height="460" align="left" valign="top" bgcolor="#006699">&nbsp;</td>
    <td colspan="2" align="left" valign="top" id="enterToStart"><table width="100&#37;" border="0" cellspacing="0" cellpadding="2">
      
      <tr>
        <td colspan="4" align="left"><a href="javascript:void(null);" onClick="CreateTab();">New Tab</a></td>
      </tr>
      <tr>
        <td width="100%" colspan="4" align="left">
          <input name="txtValue" type="text" id="txtValue">
        </td>
      </tr>
      <tr>
        <td colspan="4" id="TabsCol"></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="20" colspan="3" bgcolor="#006699">&nbsp;</td>
  </tr>
</table>
</body>
</html>

**ggd** · Mar 11, 2007 08:39

Thanks, that works well. How would I go about selecting each dynamic div individually?

**wysiwyg** · Mar 11, 2007 11:40

That depends. When would you want to select it? In an onclick event, or something else?

**ggd** · Mar 11, 2007 14:55

Originally Posted by wysiwyg

That depends. When would you want to select it? In an onclick event, or something else?

Yes, but also how to i access specific attributes like the text contained inside each dynamic div and how do i attach additional information to each div. Thanks.

User Tag List

Thread: Dynamic div?

Thread Tools

Display

Dynamic div?

Bookmarks

Bookmarks

Posting Permissions