时间戳

首页 > 解决方案 > .innerHTML 编辑 HTML 但不显示

javascript - .innerHTML 编辑 HTML 但不显示

问题描述

所以我有一些代码可以生成一些跨度以显示一些范围输入，但是当编辑跨度时，它显示的好像它是在控制台中编辑的，而不是在页面中编辑的

for (var i = 0; i < 5; i++) {
            text = document.createElement('span')
            span[pos][i] = text;
            console.log(text)
            div.innerHTML += list[i]
            text.setAttribute("id",`${pos}0${i}`)
            div.appendChild(text);
            div.appendChild(space);
        }
        div.appendChild(document.createElement('p'))
        for (var i = 0; i < 5; i++) {
            space = document.createElement('span')
            space.setAttribute("style","padding-left: 40px")
            slider = document.createElement('input')
            range[pos][i] = slider;
            slider.setAttribute("type","range")
            slider.setAttribute("id",`${pos}1${i}`)
            div.appendChild(slider);
            div.appendChild(space);
            console.log(div, i)
        }
for (var i = range.length - 1; i >= 0; i--) {
                for (var j=0; j<5; j++) {
                    span[i][j].innerHTML = range[i][j].value;
                    //console.log(j)
                }
        }

标签： javascripthtmlinnerhtml

解决方案

我不明白你打算用 5 个滑块做什么？

var range = [];
var span = [];
function init() {
var div = document.createElement('div');
for (var i = 0; i < 5; i++) {
            var text = document.createElement('span');
            span[i] = text;
            console.log(text);
            //div.innerHTML += list[i]
            text.setAttribute("id",`txt0${i}`);
            div.appendChild(text);
            var space = document.createElement('span');
            div.appendChild(space);
        }
        div.appendChild(document.createElement('p'))
        for (var i = 0; i < 5; i++) {
            var space = document.createElement('span');
            space.setAttribute("style","padding-left: 40px");
            var slider = document.createElement('input');
            range[i] = slider;
            slider.setAttribute("type","range");
            slider.setAttribute("id",`slider1${i}`);
            div.appendChild(slider);
            div.appendChild(space);
            console.log(div, i)
        }
for (var i = range.length - 1; i >= 0; i--) {
                for (var j=0; j<5; j++) {
                    span[i].innerHTML = range[i].value;
                    //console.log(j);
                }
        }
        document.body.appendChild(div);
}
<body onload="init()">
</body>

推荐阅读