在纯纯 JavaScript 无 CSS 中反转 div 的顺序

Question

我在这里找不到不是基于 jQuery 的帖子，我需要一个纯 JavaScript 示例，请不要建议任何与 CSS 解决方案相关的内容。我知道有 CSS 方法可以做与此类似的事情，但出于个人原因，我需要一个 JavaScript 解决方案来代替。

好的，我需要将所有 .x 类名 div 设置为相反的顺序，这样它看起来像这样

D
C
B
A

默认是这样的

A
B
C
D

我希望页面加载时滚动条的滚动框以 .x div 的相反顺序从底部开始，就像我创建的这张照片店图像一样。

这是我目前的代码

/*???*/

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

Answer 1

反转 div 的纯 javascript 解决方案

var divElems = document.getElementsByClassName('x');
var divB = document.getElementById('b');

var output = [];
for(var i =divElems.length - 1; i >= 0;i--){
  output.push(divElems[i]);
}

b.innerHTML = '';
output.forEach(function(eachDiv){
    b.appendChild(eachDiv);
});

工作演示 - https://jsfiddle.net/71kpLqne/

Answer 2

您可以使用document.querySelectorAll 来获取类为x 的所有元素，并且可以使用[].slice.call 将其转换为数组。然后，您可以将#b 元素的innerHTML 设置为''，这将删除其中的所有元素，并使用x 类反转元素数组，并使用forEach 将每个元素附加到#b 元素。

您可以使用elem.scrollTop = elem.scrollHeight; 将elem 滚动到底部。

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->
<script>
var container = document.querySelector('#b');
var elems = [].slice.call(document.querySelectorAll('.x'));
container.innerHTML = "";
elems.reverse().forEach(function(elem, index){
	container.appendChild(elem);
});
container.scrollTop = container.scrollHeight;
//scroll to bottom of #b div
var body = document.body,
html = document.documentElement;
var docheight = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );
//get height of document cross-browser
window.scrollTo(0, docheight);
//scroll to bottom of document
</script>

JSFiddle 演示：http://jsfiddle.net/nfwcp960/embedded/result

Answer 3

我在 cmets 和这里提供了一个链接，指向以前的类似问题，其中包含许多有效答案： Previous Question

具体针对您的问题，您可以添加以下纯 JavaScript：

<script>

window.onload = function(){
reverseEls("b"); // Reorder your divs
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); // Scroll to the bottom of the page
    }

function reverseEls(elem){
    elem = document.getElementById(elem);
        for (var i=0;i<elem.childNodes.length;i++) {
            elem.insertBefore(elem.childNodes[i], elem.firstChild);
        }
    }

</script>

这将根据需要反转您的 div 并滚动到页面底部。

Answer 4

您可以首先使用 document.querySelectorAll('.x');

然后使用.reverse() 反转此顺序。然后，您可以使用.reduce() 将这个 DOM 元素数组转换为“字符串”DOM 元素的字符串：

const divs = [...document.querySelectorAll('.x')];
const new_order = divs.reverse().reduce((acc, elem) => acc+elem.outerHTML, '');
document.querySelector('#b').innerHTML = new_order;

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

如果您改用.reduceRight()，您甚至可以将此 js 简化为单行：

document.querySelector('#b').innerHTML = [...document.querySelectorAll('.x')].reduceRight((a, e) => a+e.outerHTML, '');