如何使用 JavaScript 实时编辑 html 部分？

Question

我有类别列表侧边栏，我想让它可以上下排序，还可以删除其中的一个列表和底部。 这是图像： 示例

HTML 代码：

 <div class="side-nav-categories">
    <div class="title"><strong>Category</strong></div>
    <ul id="category-tabs">
        <li><a href="javascript:void" class="main-category"> Web Applications<i class="fa fa-minus"></i></a>
            <ul class="sub-category-tabs">
                <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" class="main-category">Script<i class="fa fa-minus"></i></a>
            <ul class="sub-category-tabs">
                <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" class="main-category">Server Script<i class="fa fa-minus"></i></a>
            <ul class="sub-category-tabs">
                <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>

Answer 1

您可以从元素的 id 中获取该元素：

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

上面的行只是使用 JavaScript 实时更改了元素内的值。但请记住，您不需要使用 innerHTML，您可以使用任何您想要的 JavaScript 属性。