How to edit html section Real Time with JavaScript?-CodePudding

I have Category list sidebar and I want to make it sortable up and down, also remove one list of them with bottom. Here is image: example

HTML CODE:

 <div >
    <div ><strong>Category</strong></div>
    <ul id="category-tabs">
        <li><a href="javascript:void" > Web Applications<i ></i></a>
            <ul >
                <li><a href="javascript:void">HTML</a></li>
                <li><a href="javascript:void">CSS</a></li>
                <li><a href="javascript:void">SCSS</a></li>
            </ul>
        </li>
    </ul>
    <ul id="category-tabs">
        <li><a href="javascript:void" >Script<i ></i></a>
            <ul >
                <li><a href="javascript:void">Javascript</a></li>
                <li><a href="javascript:void">jQuery</a></li>
                <li><a href="javascript:void">Angular JS</a></li>
            </ul>
        </li>
    </ul>
    <ul id="category-tabs">
        <li><a href="javascript:void" >Server Script<i ></i></a>
            <ul >
                <li><a href="javascript:void">C#</a></li>
                <li><a href="javascript:void">PHP</a></li>
                <li><a href="javascript:void">ASP.Net</a></li>
            </ul>
        </li>
    </ul>
    </div>

CodePudding user response：

You can grab the element from its id:

document.getElementById(**yourId**).innerHTML = 'Realtime';

The above line just changed the value inside an element in realtime, using JavaScript. Keep in mind though, that you don't need to use innerHTML, you can use any JavaScript attribute that you want.