二重入力なしの複製div [タイプ=範囲]

Question

この複製を複製したいCSS、Divisorクラス、およびJavaScriptコード の入力[type = range]を重複せずに、CSSを複製すると50を超える比較を作成するのでそして、JavaScriptコード私は最高のパフォーマンスコードを取得することはありません

<div id="comparison"> 
    <figure> 
    <div id="divisor"></div> 
    </figure> 
    <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()"> 
</div> 

CSSコード：

input[type=range]{ 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    position: relative; 
    top: -2rem; left: -2%; 
    background-color: rgba(255,255,255,0.1); 
    width: 102%; 
} 
input[type=range]:focus { 
    outline: none; 
} 
input[type=range]:active { 
    outline: none; 
} 

Javascriptのコード：

var divisor = document.getElementById("divisor"), 
slider = document.getElementById("slider"); 
function moveDivisor() { 
    divisor.style.width = slider.value+"%"; 
} 

Answer 1

新しい比較インスタンスをDOM要素に追加するには、次のコードを使用します。
純粋なJSコードで、HTMLは必要ありません。
<div id='container'></div>に比較を追加する場合はaddComparison(document.getElementById('container'))としてください。
CSSコードは、生成された比較インスタンスに対して機能します。あなたが任意のクラスやIDを使用する必要がある場合と同じように、目的の要素に追加します： divisor.id = 'divisor'またはdivisor.className = 'divisor'

function addComparison(el) { 
    var target = el || document.body; 
    var comparison = document.createElement('div'); 
    var figure = document.createElement('figure'); 
    var divisor = document.createElement('div'); 
    var input = document.createElement('input'); 
    input.type = 'range'; 
    input.min = '0'; 
    input.max = '100'; 
    input.value = '50'; 
    input.oninput = function() { 
     divisor.style.width = this.value + '%'; 
    } 
    figure.appendChild(divisor); 
    comparison.appendChild(figure); 
    comparison.appendChild(input); 
    target.appendChild(comparison); 
}