www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 31

Thread: Combining two nodes in one.

  1. #1
    Join Date
    Feb 2011
    Posts
    16

    Combining two nodes in one.

    I have two nodes with elements get by tag name.
    Now i want these two nodes merged in one node. How to do it ?
    ie:
    list1 = document.getElementById("menu1").getElementsByTagName("a");
    list2 = document.getElementById("menu2").getElementsByTagName("a");

  2. #2
    Join Date
    Feb 2006
    Posts
    2,927
    You have two node lists, which are something like arrays of nodes.
    The two node lists may be empty, or they may have one or more elements.

    You cannot combine two node lists, but you can assign each of the elements in both lists to one array.

    The array will be a static 'snapshot' of the node lists at the time you create the array, and will not have the live features of the originals.

    var A=[];
    for(var i=0, L=list1.length; i<L;i++)A.push(list1[i]);
    for(i=0, L=list2.length; i<L;i++)A.push(list2[i]);
    Last edited by mrhoo; 02-17-2011 at 10:28 PM.

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    I assume you want to add the nodes in list2 to the nodes in list 1

    Code:
     
                var list1 = document.getElementById("menu1").getElementsByTagName("a");
                var list2 = document.getElementById("menu2").getElementsByTagName("a");  
    
                for(i=0; i < list2.length; i++){
                    list1.push(list2[i]);
                }

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    I assume you want to add the nodes in list2 to the nodes in list 1

    Code:
     
                var list1 = document.getElementById("menu1").getElementsByTagName("a");
                var list2 = document.getElementById("menu2").getElementsByTagName("a");  
    
                for(i=0; i < list2.length; i++){
                    list1.push(list2[i]);
                }
    No. A DOM collection of elements is a referential collection, not an Array, thus you can not use upon them some of the Arrays methods, including push(). See also mrhoo's post.

  5. #5
    Join Date
    Feb 2011
    Posts
    16
    Quote Originally Posted by Kor View Post
    See also mrhoo's post.
    Unfortunately that is not working

    After list1 = document.getElementById("menu1").getElementsByTagName("a");

    there is a function:
    showContent(list1[0].id);

    and the function uses node...

    showContent(targetID)
    {
    var newNode = document.createTextNode(newText[targetID]);
    var place = document.getElementById("replacement");
    ItemSelect = targetID;
    place.replaceChild(newNode, place.childNodes[0]);
    if(ItemSelect=="x1")
    [do something];
    if(ItemSelect=="x2")
    [do something];
    if(ItemSelect=="x3")
    [do something];

    and so one...


    And the above is working without the combining fine with only list1 node.
    But combining the two nodes as you have proposed fails the script to work

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    var list1 = document.getElementById("menu1").getElementsByTagName("a");
    var list2 = document.getElementById("menu2").getElementsByTagName("a");
    var list12=[];
    for(var i=0;i<list1.length;i++){list12[list12.length]=list1[i]}
    for(i=0;i<list2.length;i++){list12[list12.length]=list2[i]}
    // from now one use list12 array

  7. #7
    Join Date
    Feb 2011
    Posts
    16

    Unhappy

    Quote Originally Posted by Kor View Post
    Code:
    var list1 = document.getElementById("menu1").getElementsByTagName("a");
    var list2 = document.getElementById("menu2").getElementsByTagName("a");
    var list12=[];
    for(var i=0;i<list1.length;i++){list12[list12.length]=list1[i]}
    for(i=0;i<list2.length;i++){list12[list12.length]=list2[i]}
    // from now one use list12 array

    I have just tried it.
    Still not working

    If you are not tired yet with that problem, there is a full code (also a html code with the menu elements tagged as "a"):
    http://www.webdeveloper.com/forum/sh...d.php?t=242304

    I still dont know what is going on, especialy that with only one geElementByID line it works fine...

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by kuba123 View Post
    I have just tried it.
    Still not working

    If you are not tired yet with that problem, there is a full code (also a html code with the menu elements tagged as "a"):
    http://www.webdeveloper.com/forum/sh...d.php?t=242304

    I still dont know what is going on, especialy that with only one geElementByID line it works fine...
    First: you should have not opened another thread with the same problem. It is confusing for everybody. It is called cross-post, and it should be avoided. Now I must find a way to merge logically both threads, in order to create a single one. Don't think that posting 2 versions of a single problem will multiply the chances to find a solution. On the contrary, you will confuse everybody.
    Or I might decide to delete that thread as redundant.

    Second: I wait a code of you, in which you have tried to implement our last advices. Post the code or a link to a test page, to see the up-to-date changes.

  9. #9
    Join Date
    Feb 2006
    Posts
    2,927
    As has been repeated several times-

    You are not combining two nodelists into one node list.

    The two nodelists are not changed.

    List1 is still list1, list2 is still list2.


    You are building up a third object, an array that contains the elements from the two nodelists.

    Use the array, not the nodelist, to pass your function the elements contained in both nodelists at one time.

  10. #10
    Join Date
    Feb 2011
    Posts
    16
    Quote Originally Posted by mrhoo View Post
    As has been repeated several times-

    You are not combining two nodelists into one node list.

    The two nodelists are not changed.

    List1 is still list1, list2 is still list2.


    You are building up a third object, an array that contains the elements from the two nodelists.

    Use the array, not the nodelist, to pass your function the elements contained in both nodelists at one time.
    Thats why i opened a second thread. In the first nobody was able to help me since the code i have to "upgrade" is using nodes not arrays and i may not change that.
    And with an array it was not working at all.

    Quote Originally Posted by Kor
    First: you should have not opened another thread with the same problem. (...) Or I might decide to delete that thread as redundant.
    So delete it IF they are redundant.
    The first thread is about merging arrays. Then i realized the objects I was trying to merge are not arrays but nodes and merging them into an array is not resolving the problem. I wrongly described the problem and because of it I thought nobody was able to help me.
    The second one (this one) is about merging nodes. And it seems (to me) to be the case.


    Quote Originally Posted by Kor
    Second: I wait a code of you, in which you have tried to implement our last advices. Post the code or a link to a test page, to see the up-to-date changes.
    Do you really want me to post the code... ?
    It was just a copy/paste work i dont think anything should be wrong there... but well, ok. If it help.

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Our solution is good. Your implementation must be bad. Post your new modified code (or post a link to a test page) for us to see the whole picture.

  12. #12
    Join Date
    Feb 2011
    Posts
    16
    ENTIRE html file:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <link rel="stylesheet" type="text/css" href="[file].css">
    <script language="javascript" src="[file].js"></script>
    <title></title>
    </head>
    
    <div class="menu" id="phrase-menu1">
        <ul>
          <a id="m1" href="">1.text1</a>
          <a id="m2" href="">2.text2</a>
          <a id="m3" href="">3.text3</a>
          <a id="m4" href="">4.text4</a>
        </ul>
    </div>
    
    <div class="menu" id="phrase-menu2">
        <ul>
          <a id="m17" href="">5.text5</a>
          <a id="m18" href="">6.text6</a>
          <a id="m19" href="">7.text7</a>
          <a id="m20" href="">8.text8</a>
    
        </ul>
    </div>
    
    <div id="block">
    <p><span id="replacement">text1</span>
    </p>
    </div>
    
    <div id="black">
    </div>
    
    </body></html>


    The JS part:
    Code:
    var current = 0;
    var list = null;
    var list1 = null;
    var list2 = null;
    
    var parm  = location.search.substring(1);
    var ArrayOfParm = parm.split(",");
    
    var newText = {
    m1: "Text1",
    m2: "Text2",
    m3: "Text3",
    m4: "Text4",
    m5: "Text5",
    m6: "Text6",
    m7: "Text7",
    m8: "Text8",
    };
    
    var ItemSelect;
    
    function showContent(targetID) {
      var newNode = document.createTextNode(newText[targetID]);
      var place = document.getElementById("replacement");
      ItemSelect = targetID;
      place.replaceChild(newNode, place.childNodes[0]);
    
    if(ItemSelect=="m1")
    	[external function];
    if(ItemSelect=="m2")
    	[external function];
    if(ItemSelect=="m3")
    	[external function];
    if(ItemSelect=="m4")
    	[external function];
    if(ItemSelect=="m5")
    	[external function];
    if(ItemSelect=="m6")
    	[external function];
    if(ItemSelect=="m7")
    	[external function];
    if(ItemSelect=="m8")
    	[external function];
    }
    
    
    function initPage() {
    // list = document.getElementById("phrase-menu1").getElementsByTagName("a");
    
    var list1 = document.getElementById("phrase-menu1").getElementsByTagName("a");
    var list2 = document.getElementById("phrase-menu2").getElementsByTagName("a");
    var list=[];
    for(var i=0;i<list1.length;i++){list[list.length]=list1[i]}
    for(i=0;i<list2.length;i++){list[list.length]=list2[i]}
    
    
    list[0].focus();
    showContent(list[0].id);
    
    }
    
    
    window.onload = initPage;



    With only:
    // list = document.getElementById("phrase-menu1").getElementsByTagName("a");
    it works fine

    With your code it is not

  13. #13
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    var newText = {
    m1: "Text1",
    m2: "Text2",
    m3: "Text3",
    m4: "Text4", // so far so good
    m5: "Text5",
    m6: "Text6",
    m7: "Text7",
    m8: "Text8",
    };
    And:
    Code:
    <div class="menu" id="phrase-menu1">
        <ul>
          <a id="m1" href="">1.text1</a>
          <a id="m2" href="">2.text2</a>
          <a id="m3" href="">3.text3</a>
          <a id="m4" href="">4.text4</a>
        </ul>
    </div>
    
    <div class="menu" id="phrase-menu2">
        <ul>
          <a id="m17" href="">5.text5</a>
          <a id="m18" href="">6.text6</a>
          <a id="m19" href="">7.text7</a>
          <a id="m20" href="">8.text8</a>
    
        </ul>
    </div>
    Your Object supposes to have as arguments the id's of the links. But starting with "m5, m6,m7, m8", there will be no correspondent id, as your HTML elements have other ids : "m17,m18,m19,m20". This is the error, not the Array. The array is ok:
    Code:
    function initPage() {
    var list1 = document.getElementById("phrase-menu1").getElementsByTagName("a");
    var list2 = document.getElementById("phrase-menu2").getElementsByTagName("a");
    var list=[];
    for(var i=0;i<list1.length;i++){list[list.length]=list1[i]}
    for(i=0;i<list2.length;i++){list[list.length]=list2[i]}
    
    for(i=0;i<list.length;i++){
    alert(list[i].id+' | '+ list[i].firstChild.nodeValue)
    }
    }
    window.onload = initPage
    Last edited by Kor; 02-22-2011 at 05:48 AM.

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Note: Remove the last comma after the last identifier of the Object newText. IE don't like that:
    Code:
    var newText = {
    m1: "Text1",
    m2: "Text2",
    m3: "Text3",
    m4: "Text4",
    m5: "Text5",
    m6: "Text6",
    m7: "Text7",
    m8: "Text8", // remove the last comma
    };

  15. #15
    Join Date
    Feb 2011
    Posts
    16
    >IE don't like that:
    >m8: "Text8", // remove the last comma

    I dont care Interpreter is Opera-based only.
    But for the purity of the code, i will remove it and remeber in the future.


    And the mistake You have found is no problem at all - it is only my mistake here in the forum. When i paste the code here i have cut elements of both phrase-menu`s to only 4. It is useless to put here both 16 of them, making 32 in all. and Thats why the phrase-menu2 elements start at m17 not at m5. My simple mistake here in the forum only.

    Still the problem exists...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles