使用jquery或javascript动态创建引导滑块

我正在尝试，但没有成功。作为参考，引导滑块位于以下位置：

我也不是javascript专家，所以这可能非常简单。

bootstrap slider

站点提供了许多示例，介绍了如何按照所需方式配置滑块。我将根据从JSON文件或其他数据存储方法中提取的对象数量生成许多滑块。可能是2，也可能是20

我创建了一个名为createSlider的javascript函数，试图在

bootstrap slider

站点传递所需的所有信息。我的Chrome调试区域没有出现任何错误，但什么也没有发生。正在加载所有适当的客户端源

function createSlider (orgId) {
slidersList = document.getElementById('slidersList');
element = slidersList.createElement("div");
var sliderElement = element.createElement('input');

var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.setAttribute('id', charityId);
sliderElement.setAttribute('data-slider-id', sliderUnique);
sliderElement.setAttribute('type', 'text');
sliderElement.setAttribute('data-slider-min', '0');
sliderElement.setAttribute('data-slider-max', '100');
sliderElement.setAttribute('data-slider-step', '1');
sliderElement.setAttribute('data-slider-value', '50');

var span = element.createElement('span');
span.setAttribute('style', 'padding-left:5px;');
span.innerHTML =' ';

var innerSpan = span.createElement('span');
innerSpan.setAttribute('id', sliderUniqueVal);
innerSpan.innerHTML = '50';

sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
    innerSpan.innerHTML = text(slideEvt.value);
});

}

---

slider（）

函数来自外部站点，如果我像示例状态那样显式调用它，它运行良好。有人知道怎么回事吗？有更好的方法吗？任何想法都将不胜感激。

注意，在纯JavaScript中，您只能使用

document.createElement

然后附加到另一个HTML元素。不能直接针对另一个HTML元素调用

createElement

我将您编写的一些内容从简单的旧JavaScript更改为JQuery，现在似乎可以工作了：

p.S.不知道charityId来自何处，所以只是将它作为另一个参数添加到函数中

$（函数（）{
CreateSlaider（'o1'，'c1'）；
创建滑块（'o2'，'c2'）；
CreateSlaider（'o3'，'c3'）；
});
函数createSlider（orgId，charityId）{
var slidersList=$（“#slidersList”）；
变量元素=$（“”）。附加到（滑块列表）；
var sliderElement=$（“”）。appendTo（元素）；
var sliderUnique=orgId.concat（“滑块”）；
var sliderUniqueVal=原始concat（“SliderVal”）；
sliderElement.attr（'id'，charityId）；
sliderElement.attr（'data-slider-id'，sliderUnique）；
attr（'type'，'text'）；
attr（'data-slider-min'，'0'）；
attr（'data-slider-max'，'100'）；
attr（'data-slider-step'，'1'）；
attr（'data-slider-value'，'50'）；
变量span=$（''）.appendTo（元素）；
span.attr（'style'，'padding left:5px；'）；
html（“”）；
var innerSpan=$（''）.appendTo（span）；
innerSpan.attr（'id'，sliderUniqueVal）；
html（'50'）；
滑块（{tooltip:'hide'}）；
SlideElement.on（“幻灯片”，函数（slideEvt）{
innerSpan.text（slideEvt.value）；
});
}

---

这很好用，谢谢。我不知道我不能单独使用javascript——jquery工作得很好。