AppendChild problem

cleary1981

178 100+

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

 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.getElementById("canvas").lastChild;
but that puts the element inside the lastChild.

Any suggestions?

Sep 19 '08 #1

Subscribe Post Reply

1814

Logician

210

100+

Use inserBefore in insertAfter mode:

Expand|Select|Wrap|Line Numbers

obj.insertBefore( newObj, null );

Sep 19 '08 #2

Rsmastermind

You can use insertBefore like this :

Expand|Select|Wrap|Line Numbers

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

427

Expert 256MB

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

cleary1981

178

100+

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

1,208

Expert 1GB

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

Rsmastermind

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

Rsmastermind

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

 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

Sep 23 '08 #8

rnd me

427

Expert 256MB

also might look into element.replaceChild(newChild, oldChild);

Sep 23 '08 #9

by: kie | last post by:

hello, i have a table that creates and deletes rows dynamically using createElement, appendChild, removeChild. when i have added the required amount of rows and input my data, i would like to...

Javascript

drag & drop + appendChild + Mozilla = problem

by: Ryan Stewart | last post by:

If you don't want to read this post because of its length, I understand. I've spent two and a half days on this problem and have a good deal of information to relate. And this is kind of a long...

Javascript

appendChild not working in IE6

by: Robi | last post by:

I have the following code: ############## var nHead=(document.getElementsByTagName)?document.getElementsByTagName("head").item(0):document.head; var nStyle=document.createElement("style"); //...

Javascript

DOM: Properties set before calling appendChild() are lost after call

by: Robert Oschler | last post by:

I'm having a very painful time converting some Mozilla dynamic DOM code to work with Internet Explore. For example, given this code: -------------- selectBox=document.createElement("SELECT");...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Similar topics