Javascript 重新加载Div并移动以前的内容_Javascript_Ajax_Heroku_Sinatra

Javascript 重新加载Div并移动以前的内容

javascript ajax heroku

Javascript 重新加载Div并移动以前的内容,javascript,ajax,heroku,sinatra,Javascript,Ajax,Heroku,Sinatra,我有雇员再培训局的文件： <!DOCTYPE html> <html> <head> <script> scrollDown = function() { document.body.scrollTop = document.body.scrollHeight; } </script>

我有雇员再培训局的文件：

<!DOCTYPE html>
    <html>
        <head>
            <script>
            scrollDown = function() {
               document.body.scrollTop = document.body.scrollHeight;
            }
            </script>
        </head>
        <body onload='scrollDown()'>
            <div id='2'>
            </div>
            <div id='target'>
                <%=@chat%> <!-- @chat is a variable from my ruby file -->
            </div>
            <form action="/addChat?n=<%=@name%>" method='post'>
                <input name='nchat' type='text' onload='this.focus' autofill='no' style='width:100%;height:10em;vertical-align:top'>
                <input type='submit'>
            </form>
            <a href='/home'>Go home!</a>
        </body>
    </html>

现在我唯一剩下的问题是从我的应用程序文件中的路径重新加载

的内容

post'/chatContent'do。。。返回@chat end

，其中

@chat

是一个动态变化的变量，每0.5秒一次，每次运行上述循环前都会重新加载。下面是我目前尝试重新加载循环的情况（大多数情况下都是从各种来源复制粘贴，所以我不太理解）：

var刷新延迟=5000000；
函数createRequestObject（）{
var ro；
如果（navigator.appName==“Microsoft Internet Explorer”）{
ro=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}否则{
ro=新的XMLHttpRequest（）；
}
返回ro；
}
var http=createRequestObject（）；
函数sndReq（）{
while（document.getElementById（'target'）.childNodes.length>0）{
document.getElementById（“2”）.appendChild（document.getElementById（“目标”）.childNodes[0]）；
}
http.open（'post'，'/chatContent？n='）；
http.onreadystatechange=handleResponse；
http.send（空）；
}
函数handleResponse（）{
while（document.getElementById（'target'）.childNodes.length>0）{
document.getElementById（“2”）.appendChild（document.getElementById（“目标”）.childNodes[0]）；
}
如果（http.readyState==4）{
var response=http.responseText；
document.getElementById（'target'）。innerHTML=response；
设置超时（sndReq，刷新延迟）；
}
}
设置超时（sndReq，刷新延迟）；
scrollDown=函数（）{
document.body.scrollTop=document.body.scrollHeight；
}
函数movethings（）{
while（document.getElementById（'target'）.childNodes.length>0）{
document.getElementById（“2”）.appendChild（document.getElementById（“目标”）.childNodes[0]）；
}
}

为了澄清，我正在寻找的是上述代码的替代品，包括1）运行循环将

的内容移动到

然后2）重新加载

。订单很重要

我希望这一澄清缩小了我问题的范围。如果没有，请留下一条评论，说明为什么它太宽泛，因为我不明白它是怎么回事

编辑2 总之，每个答案必须按顺序执行以下操作：

将

的内容移动到

重新加载

，使其包含我的Sinatra路线的

返回

，

post”/chatContent“

while (document.getElementById('target').childNodes.length > 0) {
    document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}

            var refreshDelay = 5000000;
            function createRequestObject() {
                var ro;
                if(navigator.appName == "Microsoft Internet Explorer"){
                    ro = new ActiveXObject("Microsoft.XMLHTTP");
                }else{
                    ro = new XMLHttpRequest();
                }
                return ro;
            }
            var http = createRequestObject();
            function sndReq() {
                while (document.getElementById('target').childNodes.length > 0) {
                    document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
                }
                http.open('post', '/chatContent?n=<%=@name%>');
                http.onreadystatechange = handleResponse;
                http.send(null);
            }
            function handleResponse() {
                while (document.getElementById('target').childNodes.length > 0) {
                    document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
                }
                if(http.readyState == 4){
                    var response = http.responseText;
                    document.getElementById('target').innerHTML = response;
                    setTimeout(sndReq, refreshDelay);
                }
            }
            setTimeout(sndReq, refreshDelay);
            </script>
            <script>
            scrollDown = function() {
               document.body.scrollTop = document.body.scrollHeight;
            }
            function movethings() {
                while (document.getElementById('target').childNodes.length > 0) {
                    document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
                }
            }