AppendChild problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • cleary1981
    New Member
    • Jun 2008
    • 178
    #1

    AppendChild problem

    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.

    Code:
    var mod_name = document.getElementById('model').value;
	document.getElementById('objName').value = "";
	if (request.readyState == 4) {
	var returned = request.responseText;
	var splitResult = returned.split(" ");
	var h = splitResult[0];
	var w = splitResult[1];	// the dimensions must be set to a scale as they are to big for the screen. 20px represents 100mm
	h = h/10;
	w = w/10;
		
	cv = document.getElementById("canvas");
	var newObject = document.createElement('div');
	newObject.Class = mod_name;
	newObject.id = g_objName;
	newObject.value = objDesc;
	newObject.innerHTML = g_objName;
	newObject.style.height = h;
	newObject.style.width = w;
	newObject.onmousedown=function(){grab(this);}	
	cv.appendChild(newObject);
	document.drop_list.objName.focus();
}
    I have tried
    cv = document.getEle mentById("canva s").lastChil d;
    but that puts the element inside the lastChild.

    Any suggestions?
    Tags: None
    • Logician
      New Member
      • Feb 2007
      • 210
      #2
      Use inserBefore in insertAfter mode:

      Code:
      obj.insertBefore( newObj, null );

        Comment

        • Rsmastermind
          New Member
          • Sep 2008
          • 93
          #3
          You can use insertBefore like this :
          Code:
          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 .

            Comment

            • rnd me
              Recognized Expert Contributor
              • Jun 2007
              • 427
              #4
              Originally posted by Rsmastermind
              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...

                Comment

                • cleary1981
                  New Member
                  • Jun 2008
                  • 178
                  #5
                  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

                    Comment

                    • iam_clint
                      Recognized Expert Top Contributor
                      • Jul 2006
                      • 1207
                      #6
                      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.

                        Comment

                        • Rsmastermind
                          New Member
                          • Sep 2008
                          • 93
                          #7
                          Originally posted by rnd me
                          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

                            Comment

                            • Rsmastermind
                              New Member
                              • Sep 2008
                              • 93
                              #8
                              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="comboCh ange();">
                              <td><span>Actio n</span></td>
                              <td><select id="combo1" name="combo1" size="1" class="optional " onchange="chang eCombo2(this);" >
                              <option value="conditio n 1">Proceed</option>
                              <option value="conditio n 2">Reject</option></select></td>

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

                              </body></html>[/HTML]
                              Code:
                              function comboChange()

	{
		var combos= document.getElementsByTagName('SELECT');
 		var i=combos.length-1;
	 
	 for (;i>=0;i--)
	   {	
							var newP=document.createElement("input");
			newP.value=combos[i].value;
			newP.readOnly=true;
		 	combos[i].parentNode.insertBefore(newP,combos[i]);
			combos[i].parentNode.removeChild(combos[i]);
        }

	}
                              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

                                Comment

                                • rnd me
                                  Recognized Expert Contributor
                                  • Jun 2007
                                  • 427
                                  #9
                                  also might look into element.replace Child(newChild, oldChild);

                                    Comment

                                    Previous template Next
                                    Working...