使用DOM实现另类可修改的侧边栏

QyangR1123

于 2021-11-22 17:54:01 发布

阅读量635

点赞数

分类专栏：学习分享文章标签： html css 前端 js

本文链接：https://blog.csdn.net/QyangR1123/article/details/121476337

版权

本文介绍了作者在学习DOM后，通过HTML、CSS和JS实现了一个可输入和修改内容的侧边栏。侧边栏允许用户通过输入生成内容，使用for循环动态创建15个div元素，并添加了修改功能。当点击修改按钮时，能够对选定行的文本进行修改，实现了简单的前端交互效果。

摘要由CSDN通过智能技术生成

在学习完DOM之后，通过使用DOM制作侧边栏来熟悉DOM的增、删、改、获取的使用。在制作的过程中，就想去做一个稍微灵活一点，代码量不大的侧边栏，因此就有了以下的内容，独自学习一些前端知识后的小分享。

首先先实现侧边栏通过输入生成的功能，这里就是用for循环，因为比较懒就不动态侧边栏的行数了，直接给固定输入15行。然后过去父元素body，通过for循环在body下生成15个可输入的子元素div。

实现代码如下：

var body = document.getElementsByTagName("body");//获取body

    for (var i = 1; i <= 15; i++) {
        var box = document.createElement("div");//创造一个div
        box.innerHTML = prompt("请输入第" + i + "行内容");//修改div中文本内容
        body[0].appendChild(box);
    }

页面实现效果：