querySelectAll и добавление элементов к html

Question

Похоже, что веб-браузер не показывает результаты запроса querySeletorAll с идентификатором css, который предназначен для создания списка слов, выбранных из html, для создания списка ключевых слов в качестве дополнительного элемента. Можно просмотреть последовательность для l oop и почему список не отображался в слоте html, кажется, что элементы не добавляются на страницу при ссылке.

javascript связан со страницей html:

window.addEventListener("load",findKeyWords);
window.addEventListener("load", makeKeyStyles);

function findKeyWords(){
  var article = document.getElementById("doc");
  var aside =document.createElement("aside");
  aside.setAttribute("id", "keywords");
  var header = document.createElement("h1");
  var headertext = document.createTextNode("KeyWord List");
  var ol = document.createElement("ol");
  headerone= aside.getElementByTagName("h1")
  headerone.appendChild(headertext);
  document.getElementById("keywords").appendChild(header);
  document.getElementById("keywords").appendChild(ol);


  var keyWordElems = document.querySelectorAll("article#doc dfn");
  var keyWords = new Array(keyWordElems.length);

  for(int k = 0; k<keyWordElems.length; k++){
    keyWords[k]= keyWordElems;
    keyWords.sort();
    var linkId =replaceWs(keyWords[k]);
  }

  for(int i =0;i keyWordElems.length; i++){
    var linkId = replaceWs(keyWord[i]);
    var keyWordListItem = document.createElement('li');
    var keyWordLink = document.createElement('a');
    keyWordLink.setAttribute('href', "#keyword_" +linkID);
    keyWordLink.innerHTML = keyWords[i];
    keyWordListItem.appendChild(keyWordLink);
    ol.appendChild(keyWordListItem);
    $("doc").preappend("keywords"); 
  }
}


function makeKeyStyles(){
  var asidestyles = document.createElement("styles");
  document.aside.appendChild("asidestyles");
  document.styleSheets[document.syleSheets.length-1].insertRule(
    "aside#keywords{\
    border:3px solid rgb(101,101,101);\
    float: right;\
    margin: 20px 0px 20px 20px;\
    padding: 10px;\
    width: 320px;\
    }\

    aside#keywords h1{\
    font-size: 2em;\
    margin: 5px;\
    text-align: center;\
    }\

    aside#keywords ol{\
    margin-left: 20px;\
    font-size: 1.2em;\
    }\

    aside#keywords ol li{\
    line-height: 1.5em;\
    }\

    aside#keywords ol li a{\
    color:rgb(101, 101,101); 
    text-decoration: none;\
    }",0);
}





/* Supplied Functions */

function replaceWS(textStr) {
  var revText = textStr.replace(/\s+/g,"_");
  return revText;
}