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

所以我习惯于使用jQuery，但我需要用纯JS来实现这一点，我有点不懂。任何帮助都会很好

我有一个包含HTML的文档片段。我想以自定义顺序附加此html。所以不是显示为1，2，3，4。我可能希望它显示为4，3，1，2或2，3，1，4等

以下是我的基本代码：

HTML:

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

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;

我所尝试的：

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

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;

因此，我发现： 但是，当我第二次尝试通过ID获取元素时，它似乎就断了

任何帮助都会很好

到目前为止，我一直在摆弄我的东西：

---

谢谢

我知道这篇文章有点老，但如果你没有得到答案，试试这个：我不久前在另一篇文章中看到过

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();

---

对文档片段使用

querySelector

或

querySelectorAll

。@Teemu你有什么例子吗？努力寻找任何地方都有我需要实现的相关文档。谢谢你可以看看这个答案：