Javascript 可以交换div的两个子对象的位置并为其设置动画吗？_Javascript_Html_Css_Arrays

Javascript 可以交换div的两个子对象的位置并为其设置动画吗？

javascript html css arrays

Javascript 可以交换div的两个子对象的位置并为其设置动画吗？,javascript,html,css,arrays,Javascript,Html,Css,Arrays,所以我对数组的元素进行冒泡排序，数组的数据取自文本区域。我从textarea获取数据，将其放入一个数组，然后将数组中的每个元素附加到appendThem（）函数中名为chars的div中。那么，在排序过程中，是否有任何方法可以设置元素之间交换的动画？我使用了var array=new array（），因为bubbleSort（）函数是在另一个文件中定义的，我想全局访问array。我只是在这里交换innerHTML。我想不出交换孩子的办法。是否可以交换子对象并对其设置动画 var board =

所以我对数组的元素进行冒泡排序，数组的数据取自文本区域。我从textarea获取数据，将其放入一个数组，然后将数组中的每个元素附加到

appendThem（）

函数中名为

chars

的div中。那么，在排序过程中，是否有任何方法可以设置元素之间交换的动画？我使用了

var array=new array（）

，因为

bubbleSort（）

函数是在另一个文件中定义的，我想全局访问

array

。我只是在这里交换innerHTML。我想不出交换孩子的办法。是否可以交换子对象并对其设置动画

var board = document.getElementsByClassName("chars")[0];
var array= new Array();

function appendthem(){
    var input = document.getElementById("charInput").value; 
    input = input.replace(/ /g,'')
    array = input.split(",");


    while (board.firstChild) {
        board.removeChild(board.lastChild);
    }  //Removing any existing children from old data when new data is entered

    for(var i=0; i<array.length; i++){
        var elem = document.createElement("p");
        elem.style.marginLeft="20px";
        var textnode  = document.createTextNode(array[i]);
        elem.appendChild(textnode);
        board.appendChild(elem);    
    }
        bubbleSort();
}

function bubbleSort(){
    for(var m=0; m<array.length; m++){
        isSwapped =false;

        for(var j=0; j<array.length-m-1; j++){
            if(  Number(board.children[j].innerHTML) > Number(board.children[j+1].innerHTML) ){
                    var temp = board.children[j].innerHTML;
                    board.children[j].innerHTML = board.children[j+1].innerHTML;    
                    board.children[j+1].innerHTML = temp;
                isSwapped = true;
            }
        }

      if( !isSwapped ){
          break;
      }
    }
}

更新：应要求添加HTML：

<html>
    <head>
       
        <link rel="stylesheet" href="index.css"/>
        <script type="text/javascript" src="algorithms/bubble.js"></script>
    </head>

<body>
<div class="container">
        
        <div class="textbox">
            <textarea id="charInput" placeholder="Enter numbers or letters separated by commas."></textarea>
        </div>

        <div class="board">
            <div class="chars"></div>
        </div>

<button class="submitBtn" onclick="appendthem()" >Sort!</button>

</div>


<script type="text/javascript" src="index.js"></script>
</body>
</html>


分类

您好，您也可以添加HTML吗？我已经添加了HTML。

<html>
    <head>
       
        <link rel="stylesheet" href="index.css"/>
        <script type="text/javascript" src="algorithms/bubble.js"></script>
    </head>

<body>
<div class="container">
        
        <div class="textbox">
            <textarea id="charInput" placeholder="Enter numbers or letters separated by commas."></textarea>
        </div>

        <div class="board">
            <div class="chars"></div>
        </div>

<button class="submitBtn" onclick="appendthem()" >Sort!</button>

</div>


<script type="text/javascript" src="index.js"></script>
</body>
</html>