使用 Javascript 在列表元素上方动态移动 div

Question

我有如下所示的html布局。我想使用纯 Javascript 在列表元素之前动态移动这个div。谁能告诉我如何做到这一点。

提前致谢

    <ol class="chapter-list" style="width: 469px">
        <li data-time="0" id="0"><span style="display: inline-block; width: 88%;">Chapter 1</span></li>
        <li data-time="104" id="104"><span style="display: inline-block; width: 88%;">Chapter 2</span></li>
        <li data-time="235" id="235"><span style="display: inline-block; width: 88%;">Chapter 3</span></li>
        <li data-time="309" id="309"><span style="display: inline-block; width: 88%;">Chapter 4</span></li>
        <li data-time="406" id="406"><span style="display: inline-block; width: 88%;">Chapter 5</span></li>
    </ol>
    <div id="mydiv"></div>

Answer 1

您可以使用 dom node 元素的 insertBefore 方法，如下所示：

var divEl, refEl, parentEl;
//get the div element
divEl = document.getElementById("mydiv");
//get the parent of the div element
parentEl = divEl.parentElement;
//get the referrence el before which you want to insert the div by quering the parent node
refEl = parentEl.querySelector('.chapter-list');
//Insert the div element before the reference el
parentEl.insertBefore(divEl, refEl);

Answer 2

一点DOM遍历，removeChild和insertBefore的组合就可以做到这一点。首先获取元素：

var below = document.getElementById('mydiv');

然后找出它上面的第一个元素：

var above = below.previousSibling;
while(above && above.nodeType !== Node.ELEMENT_NODE)
    above = above.previousSibling;

（有一个previousElementSibling属性也可以完成这项工作，但我不知道它已经存在了多长时间。

然后我们可以将其从文档中删除并将其重新插入列表上方：

below.parentNode.removeChild(below);
above.parentNode.insertBefore(below, above);

---

_{^{如果您需要高尔夫版本：!function(n,d,b,p){for(b=d[n];b&&b.nodeType-1;b=b[n]);b&&((p=d.parentNode).removeChild(d),p.insertBefore(d,b))}('previousSibling',document.getElementById('mydiv'))}}

Answer 3

你能用我的例子吗：

var content = jQuery('.chapter-list').html();
jQuery('#mydiv').append(content);
// you can use prepend() place to append

http://jsfiddle.net/vk90pfrb/

Answer 4

请在 jsfillde 上检查以下代码 http://jsfiddle.net/f9z7m7y7/

var div = document.getElementById("mydiv");
var list = document.getElementById("chapter-list");
var newItem = document.createElement("div");
list.parentNode.insertBefore(newItem, list);
newItem.innerHTML = div.innerHTML;
div.parentNode.removeChild(div);
newItem.id = "mydiv";