用js更改内部html id

Question

how do you change a inner id with js and keep it the same id num (eg hey1, bob2)

my js code

var obj = document.getElementById("chat").cloneNode(true);
var obj1 = document.getElementById("ch");
var obj2 = document.getElementById("chatbox");

var p = $(".chat");
var offset = p.offset();

num = num + 1;        

if (num <=15) {

obj.id = obj.id + num;  <--- **changing the id (this one works fine but the other two dont**
obj1.id = obj1.id + num;   <--- changing the id
obj2.id = obj2.id + num;      <--- changing the id

document.body.appendChild(obj);
document.body.appendChild(obj1);
document.body.appendChild(obj2);

var left = offset.left + 275;

document.getElementById("chat").style.left = left + "px";

tell me if i am doing it wrong but this was the easiest way i thought off

(ps i am a beginner at javascript)

thanks to all that try to help...

Edit

ok i clone this

<div class="chat" id="chat">
<div id="ch" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

and everytime it clones it changes the id of chat,ch and chatbox but keeping the original the same

like so...

clone1

<div class="chat" id="chat1">
<div id="ch1" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox1">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

Clone2

<div class="chat" id="chat2">
<div id="ch2" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox2">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

Answer 1

Not sure, but if I'm right, you're trying to create a new 'chatnode'. You'll have to traverse the childNodes array of the node you cloned to change id's. Try something like:

function cloneChat(){
  var obj  = document.getElementById("chat").cloneNode(true),
      children = obj.childNodes
  ;
  num += 1;
  obj.id = obj.id+num;
  if (num<16){
      changeId(children,num);
  }
  //now appending obj to the document.body should be sufficient
  document.body.appendChild(obj);

  //change id recursively  
  function changeId(nodes, n){
   for (var i=0;i<nodes.length;i=i+1){
     if (nodes[i].childNodes){
           changeId(nodes[i].childNodes,n);
     }
     if(nodes[i].id && /^ch$|^chatbox$/i.test(nodes[i].id)) {
      nodes[i].id += String(n);
     }
   }
  }

}

See this jsfiddle for a working example

Furthermore, this code won't work:

var p = $(".chat");
var offset = p.offset();

Because $(".chat") returns a list of nodes, where every node has it's own offset.

You seem to be using jQuery, so I suggest adding a 'jQuery' tag to your question. Maybe some jQuery whizzkid has a solution to offer.

Answer 2

In jQuery try to use

element.attr("id","newId");

See: http://api.jquery.com/attr/

Answer 3

How about this function?

    function appendMe() {
        var elementsToClone = ["chat"];                       //Parent Elements to clone. This is the class name as well as the id
        var childrenToHandle = new Array();
        childrenToHandle["chat"] = ["ch"];          //Child elements mapping to keep sync. This is the class name as well as the id. Here we say that for the parent element chat, the inner elements to keep in sync is ch
        var itemCount = 0;
        for(i = 0; i < elementsToClone.length; i++) {
            var refObj = document.getElementById(elementsToClone[i]);
            if(refObj) {
                $("." + elementsToClone[i]).each(
                    function() {
                        if(this.id.match(/\d+$/g)) {
                            itemCount = this.id.match(/\d+$/g);
                        }
                    }
                );
                var newObj = refObj.cloneNode(true);
                newObj.id = elementsToClone[i] + ++itemCount;
                var childrenArray = childrenToHandle[elementsToClone[i]];
                if(childrenArray) {
                    $(childrenArray).each(
                        function() {
                            $(newObj).find("." + this).attr("id", this + itemCount);
                        }
                    );
                }
                document.body.appendChild(newObj);
            }
        }
    }

Answer 4

Since you're already using jQuery in your code, how about:

var $obj = $("#chat").clone(),
    $obj1 = obj.find("#ch"),
    $obj2 = obj.find("#chatbox");

var p = $(".chat"),
    offset = p.offset();

num = num + 1;

if (num <= 15) {

    $obj.attr('id', $obj.attr('id') + num);
    $obj1.attr('id', $obj1.attr('id') + num);
    $obj2.attr('id', $obj2.attr('id') + num);

    $('body').append(obj);

    var newLeft = offset.left + 275;

    $('#chat').css({
        left: newLeft
    });

}