JavaScript - 重新排序文档片段中的元素

时间:2016-08-16 16:18:02

标签: javascript

所以我以前习惯使用jQuery,但是我需要用纯JS实现这一点,而且我的深度有点偏差。任何帮助都会很棒!

我有一个包含我的HTML的文档片段。我想在自定义顺序中附加此HTML。因此,而不是显示为1,2,3,4。我可能希望它显示为4,3,1,2或2,3,4,4等......

这是我的基本代码:

HTML:

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

JS:

var frag = document.createDocumentFragment(),
    div = document.createElement('div'),
    html = document.getElementById('container').innerHTML;

frag.appendChild(div);
frag.children[0].innerHTML = html;  

document.getElementById('container').innerHTML = frag.children[0].innerHTML;

我尝试过的事情:

所以,我发现了这个:https://jsfiddle.net/jltorresm/1ukhzbg2/2/ 但第二个我尝试通过它的ID获取我的元素似乎打破了。

任何帮助都会很棒!

我已经摆弄了到目前为止我所拥有的内容:https://jsfiddle.net/tzdrho43/

谢谢!

1 个答案:

答案 0 :(得分:1)

我知道这篇文章有点陈旧,但是如果您没有得到答案,请尝试以下操作:我不久前在另一篇文章中看到了它。

function shuffleQuiz(){
    var parent = document.getElementById("container");
    var divs = parent.children;
    var frag = document.createDocumentFragment();
    while (divs.length) {
        frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
    }
    parent.appendChild(frag);
}

shuffleQuiz();