Add remove elements dynamically

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kelton5020
    New Member
    • Dec 2007
    • 4
    #1

    Add remove elements dynamically

    Hey, I am having problems adding/removing elements dynamically.
    I know why it's not working, I just don't know a work-around for the problem.

    Problem:
    I am dynamically creating elements, naming them, and then later searching for them so I can eather append them, or delete them. Works in firefox of course. I know this isn't supposed to work, and I have no idea how to make it work.
    Basically when I do this:

    Code:
    var fElement = getElementsByName('elementname');
    and then do this
    Code:
    window.alert(fElement.length);
    I obviously get a 0.

    I just need some kind of work-around that follows standards, or at least compatible with Firefox, Internet Explorer, Safari, and Opera. If it doesn't work in Netscape it's no big deal.

    thanks.

    ALSO-----

    Oh also, using a
    Code:
    document.createElement('<input name="whatever">');
    Doesn't work eather. Still doesn't register.
    Thanks.
    Tags: None
    • Dasty
      Recognized Expert New Member
      • Nov 2007
      • 101
      #2
      Code:
      var fElement = document.getElementsByName('elementname');
alert(fElement.length);
      Code:
      var newobj = document.createElement('input');
newobj.name = 'myname';
document.body.appendChild(newobj);
      as an examples ...

        Comment

        • kelton5020
          New Member
          • Dec 2007
          • 4
          #3
          Originally posted by Dasty
          Code:
          var fElement = document.getElementsByName('elementname');
alert(fElement.length);
          Code:
          var newobj = document.createElement('input');
newobj.name = 'myname';
document.body.appendChild(newobj);
          as an examples ...
          still returning Undefined when I specify a specific element in the fElement array, and the length is still 0. I'd post my code but it's a bit lengthy and uncommented. So here is what I did...I used your code and created a sample page...works in Opera, Firefox, but not Internet Explorer...
          Code:
          <html>
	<head>
		<script type="text/javascript">
			function addButton(){
				var newobj = document.createElement('button');
				newobj.name = 'myname';
				newobj.setAttribute('value', 'Button To Find');
				document.body.appendChild(newobj);
			}
			function findButton(){
				var fElement = document.getElementsByName('myname');
				var tElement = document.getElementsByName('tbox');
				window.alert(fElement.length);
				tElement[0].value = fElement.length;
				document.write(fElement.length);
			}
		</script>
	</head>
	<body>
		<input type='button' onClick='addButton()' name='tbox' value='addbutton'></input>
		<input type='button' onClick='findButton()' name='fbutton' value='Find Button'></input><br><br>
	</body>
</html>
          I also tried creating the obect with this statement instead
          Code:
          var newobj = document.createElement('<input type="button" name="myname">');
          and it still didn't work.

            Comment

            • kelton5020
              New Member
              • Dec 2007
              • 4
              #4
              CORRECTION...

              in IE when you use this instead
              Code:
              var newobj = document.createElement('<input type="button" name="myname">');
              it works...but when I try to do this with a unordered list it doesn't work.

                Comment

                • kelton5020
                  New Member
                  • Dec 2007
                  • 4
                  #5
                  Through testing I discovered the solution to my problem that works on Opera, Firefox AND Internet Explorer.

                  Here it is.

                  Code:
                  <html>
	<head>
		<script type="text/javascript">
			function addButton(){
				var newobj = document.createElement('div');
				newobj.id = 'myid';
				newobj.setAttribute('style', 'background-color: blue;');
				document.body.appendChild(newobj);
				var tElement = document.getElementsByName('tbox');
				newobj.appendChild(tElement[0]);
			}
			function findButton(){
				var fElement = document.getElementById('myid');
				var tElement = document.getElementsByName('tbox');
				window.alert(fElement.id);
				tElement[0].value = fElement.length;
			}
		</script>
	</head>
	<body>
		<input type='button' onClick='addButton()' name='tbox' value='addbutton'></input>
		<input type='button' onClick='findButton()' name='fbutton' value='Find Button'></input><br><br>
	</body>
</html>
                  Things to note...I searched for the ID as opposed to a name. This was my initial problem it seems. This does pose a problem for arrays of elements. I hope this helps out someone else. Couldn't find this information anywhere, no site specified that you can't use the name value on all elements. Anyhow, yeah.

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by kelton5020
                      Couldn't find this information anywhere, no site specified that you can't use the name value on all elements. Anyhow, yeah.
                      This was discussed a few months ago here, but I can't find the link.

                      IE has a buggy implementation of the createElement method - see link (from the horse's mouth).

                      If you Google for "set name attribute IE", you may find one or two interesting links.

                        Comment

                        • mmurph211
                          New Member
                          • Jan 2008
                          • 13
                          #7
                          Here's a good link:

                          Creating Form Elements with Javascript:
                          http://www.matts411.co m/webdev/creating_form_e lements_with_ja vascript

                            Comment

                            Previous template Next
                            Working...