更改DIV宽度JavaScript的名称

Question

I am using following code:

... 
<div id="divcontainer1">
    ...
    <div id="divcontainer2">
          ...
    </div>
</div>
...

Now, I want change "divcontainer2" at a later point of time in the Div "divcontainer3".

What is the right way to check is exist divcontainer2 and when true, change in divcontainer2 width javascript ?

Thank you, Hardy

Answer 1

It is probably not nest practice but you can do this by changing the .outterHTML of the element. You would likely want to improve on this but here is a quick example. The last line checks if div 2 exists.

        var div2 = document.getElementById("div2");
        var html = div2.outerHTML;
        var idx = html.indexOf(">");
        var newtag = html.substring(0, idx).replace("div2", "div3");
        div2.outerHTML = newtag + html.substring(idx, html.length - 1);
        var contents = document.getElementById("div3").innerHTML;


        alert(document.getElementById("div2") != undefined);

All you do is

1. get the element .outterHTML
2. get the substring representing the tag.
3. Replace the text that defines it
4. Set the .outterHTML tag to our new string

Now you have a newly named div that keeps all of its attributes, position in the parent and content.

The alert line is how you check for the existence of an object.

Answer 2

I don't believe that there is a "proper" way to do this, however I would store the contents of divcontainer2 in a variable, and then do something like this

var containerOfDivContainer2 = document.getElementById("containerofdiv2");
containerOfDivContaier2.innerHTML = "<div id='divcontainer3'>"/* insert div contents */+"</div>";

Of course, this requires you to put divcontainer2 in a div called containerofdiv2 but it works.

Answer 3

If using jQuery, this will do it:

$('#divcontainer2').attr('id','divcontainer3');

But you shouldn't be changing IDs. Use classes instead and then use the jQuery's toggleClass() function, like:

<div id="divcontainer1">
    ...
    <div id="divcontainer2" class="style1">
    ...
</div>

$('#divcontainer2').toggleClass("style1 style2");