How Would i go about changing entire <li> via javascript

Question

I was wondering if theres a method to changing a <li> id using a similar method to below.

document.getElementById('moderator_viewer_container').innerHTML = "<li id="moderator_viewer_container" style="">

<h4 class="drag_handle drag_handle1">

    Moderator

</h4>
<ul id="moderator_viewer_list" class="viewer_list">
    <li id="chat_user_cyrez" class="nick">
        <a id="chat_user_cyrez-link" class="" href="#">

            cyrez

        </a>
    </li>
    <li id="chat_user_imonicaonline" class="nick">
        <a id="chat_user_imonicaonline-link" class="" href="#">

            imonicaonline

        </a>
    </li>
</ul>

";

so in a sense what i am basically saying is i want to remove that id and replace it with a full edit via html within the javascript

Answer 1

Definitely exists! And here it is:

document.getElementById('selected_div').id = 'new-id';

Just select your element by old id and set a new one. And keep in mind that you can't select it any more with the old id .

Answer 2

... or

document.getElementById("selected_div").outerHTML = "<div id="new_id"></div>";

which replaces selected div and all it's child elements with new HTML content

Answer 3

The DOM api allows you to modify attributes of html elements. After you obtain an html element, you can either access the properties in the following ways:

element.property = "foobar";

or

element.setAttribute("property", "foobar");

In your case, you can do

element.setAttribute("id", 5);

There are also cross-browser issues you should be aware of when dealing with html attributes. See here .