无法让javascript使用json/flask响应重定向到新页面并更新其dom

我正在开发一个聊天应用,和Slack没什么两样。我向用户显示一个页面,在该页面中输入 channels.html 是的。下面的JavaScript成功捕获该条目,将其投掷到适当的烧瓶路径,并接收JSON响应,通过构建一个JSON响应来处理它 <div> 储存在 contents 是的。

期望的行为:在表单提交到 messages.html 以及dom元素 #channelList 变化。我已经三倍了

我想我可以按顺序翻页 windows.location.href 以及改变 .innerHTML 所需元素的属性,但这是不允许的,我得到 Uncaught TypeError: Cannot read property 'querySelector' of null 在我的控制台中,在对行的引用中 document.querySelector('#channelList').innerHTML += contents; .元素非常多,拼写正确。给什么?

javascript代码:

(function() {

    var form = document.querySelector('#channelForm'),
        button = form.querySelector('input.btn-primary');

    if (!button) console.log('move your js below your html')

    console.log('binding listener to', button);

    button.addEventListener('click', function(e) {
      e.preventDefault();
      console.log('process form data!');
      console.log("here");

      // initialize request
      const request = new XMLHttpRequest();
      const channelName = document.querySelector('#channelName').value;

      request.open('POST', '/channels');

      request.onload = () => {

          // Extract JSON data from request
          const data = JSON.parse(request.responseText);
          console.log(data);

          // Update the result div
          if (data.success == true) {

            let contents = ""; 

            for (let i = 0, j = data["channel"].length; i < j; i++) {

              contents += "<div>" + data["channel"][i] + "</div>";
              console.log(contents);

            }

            window.location.href = Flask.url_for("messages");
            document.querySelector('#channelList').innerHTML += contents;

          } else {

             console.log("error");
          }

      };

      // Add data to send with request
      const data = new FormData();
      data.append('channel', channelName);

      // Send request to Flask
      request.send(data);
      //return false;

    });

})()

页面中存在元素的HTML,但控制台称它们为空

<div class="col-md-3 border border-danger rounded">
    <div class="row mt-2 justify-content-start">
        Header
    </div>
    <div class="row mt-2 justify-content-start" id="channelHeader">
        <a href="{{ url_for('channels') }}">Channels</a>
    </div>
    <div class="row mt-2 justify-content-start" id="channelList">
        Channels
    </div>
    &nbsp;
    <div class="row justify-content-start" id="dmsg">
        Direct Messages
    </div>
</div>