By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,377 Members | 1,657 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,377 IT Pros & Developers. It's quick & easy.

AppendChild problem

100+
P: 178
Hi,

Below is the code i am currently using to append a child element. It works fine but what I want to achieve is that everytime a new child is added it shows beside the lastchild element.

Expand|Select|Wrap|Line Numbers
  1. var mod_name = document.getElementById('model').value;
  2.     document.getElementById('objName').value = "";
  3.     if (request.readyState == 4) {
  4.     var returned = request.responseText;
  5.     var splitResult = returned.split(" ");
  6.     var h = splitResult[0];
  7.     var w = splitResult[1];    // the dimensions must be set to a scale as they are to big for the screen. 20px represents 100mm
  8.     h = h/10;
  9.     w = w/10;
  10.  
  11.     cv = document.getElementById("canvas");
  12.     var newObject = document.createElement('div');
  13.     newObject.Class = mod_name;
  14.     newObject.id = g_objName;
  15.     newObject.value = objDesc;
  16.     newObject.innerHTML = g_objName;
  17.     newObject.style.height = h;
  18.     newObject.style.width = w;
  19.     newObject.onmousedown=function(){grab(this);}    
  20.     cv.appendChild(newObject);
  21.     document.drop_list.objName.focus();
  22. }
I have tried
cv = document.getElementById("canvas").lastChild;
but that puts the element inside the lastChild.

Any suggestions?
Sep 19 '08 #1
Share this Question
Share on Google+
8 Replies


100+
P: 210
Use inserBefore in insertAfter mode:

Expand|Select|Wrap|Line Numbers
  1. obj.insertBefore( newObj, null );
Sep 19 '08 #2

P: 93
You can use insertBefore like this :
Expand|Select|Wrap|Line Numbers
  1. cv.parentNode.insertBefore(newObject,cv);
The above code will append a new node i.e newObject just before cv.

Or If you want it in last instead of cv put there null and remove 'cv.parentNode' as suggeted by Logician .
Sep 22 '08 #3

rnd me
Expert 100+
P: 427
The above code will append a new node i.e newObject just before cv.
.
quick sidenote/ tip :
it doesn't have to be a new node.
you can move existing nodes around like this.

DOM1 spec says that if newNode is already part of the tree, it will be removed first.

same goes for appendChild...
Sep 22 '08 #4

100+
P: 178
none of these suggestions will do what I need to. Is there a way to specify where the append child will appear in the parent node? eg always appear in bottom left
Sep 22 '08 #5

iam_clint
Expert 100+
P: 1,208
When you append something it goes on the end

you may have to do an insertbefore or some more javascript to relign everything after its appended.
Sep 22 '08 #6

P: 93
quick sidenote/ tip :
it doesn't have to be a new node.
you can move existing nodes around like this.

DOM1 spec says that if newNode is already part of the tree, it will be removed first.

same goes for appendChild...
remove does not mean that I had told remove from the DOM I had told him to remove from my code written

remove 'cv.parentNode' .
Friend I had done with the insertBefore this is the method only with which you c an proceed .Or this is the only way to insert a thing on the right place in the DOM
Sep 23 '08 #7

P: 93
The code written below is tried and tested


For you friend as demo post your democode like where you want to put the new node.

[HTML]<html><body onload="comboChange();">
<td><span>Action</span></td>
<td><select id="combo1" name="combo1" size="1" class="optional" onchange="changeCombo2(this);">
<option value="condition 1">Proceed</option>
<option value="condition 2">Reject</option></select></td>

<td><span>No Action</span></td>
<td><select id="combo2" name="combo2" size="1" class="optional" >
<option value="condition 1">Proceed</option>
<option value="condition 2">Reject</option></select></td>

</body></html>[/HTML]
Expand|Select|Wrap|Line Numbers
  1. function comboChange()
  2.  
  3.     {
  4.         var combos= document.getElementsByTagName('SELECT');
  5.          var i=combos.length-1;
  6.  
  7.      for (;i>=0;i--)
  8.        {    
  9.                             var newP=document.createElement("input");
  10.             newP.value=combos[i].value;
  11.             newP.readOnly=true;
  12.              combos[i].parentNode.insertBefore(newP,combos[i]);
  13.             combos[i].parentNode.removeChild(combos[i]);
  14.         }
  15.  
  16.     }
The code written is working fine each time in the DOM it searches the combo and removes the combo and put exactly there a new node from where it removed the combo box.See the above html and code ,try it I hope now you will understand
Sep 23 '08 #8

rnd me
Expert 100+
P: 427
also might look into element.replaceChild(newChild, oldChild);
Sep 23 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.