在学习完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);
}页面实现效果：
然后，我选择在页面中添加一个修改按钮，去具体实现对想要修改的那一行，进行文本修改，并且对button和div进行基本的样式设置。
实现代码如下：
<style>
div {
margin: 20px;
font-size: 15px;
}
button {
position: absolute;
left: 50px;
top: 660px;
}
</style>
<body>
<button onclick="setInfo()">修改</button>
</body>
<script>
var body = document.getElementsByTagName("body");
for (var i = 1; i <= 15; i++) {
var box = document.createElement("div");
box.innerHTML = prompt("请输入第" + i + "行内容");
body[0].appendChild(box);
}
function setInfo() {
var num = prompt("请输入你想要修改第几行(只能输入阿拉伯数字)");
var box = document.getElementsByTagName("div");
box[num - 1].innerHTML = prompt("请输入你想要修改的内容");
}
</script>页面实现效果：
点击修改，会跳出提示。这里我选择修改第2行，根据提示继续操作。
修改之后的效果展示：