Как создать элемент после определенного элемента при загрузке определенного элемента?

Question

Я разрабатываю расширение, которое создаст кнопку после указания элемента c для определенного шаблона URL. Я пробовал это (я новичок ie для кодирования)

var btn = document.createElement("button");
brn.innerHTML="click here for check";              
para.onclick = asnwer(); 
var loc = document.evaluate('//*[@id="extended-nav"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
document.body.insertBefore(btn,loc.snapshotItem[0]);

Я хочу загрузить эту кнопку после /html/body/div[5]/div[3]/div[3]/div/div/div/div/div[2]/main/div[2]/div[6]/div/section/div[1], но элемент не загружается с документом напрямую, он загружается только если прокрутить до эта часть.

это функция, которая будет выполнять действия по нажатию на эту кнопку, но опять-таки, xpath действителен, только если страница прокручена до этой точки.

function answerMachine() {
var expand2 = document.evaluate('//*[@aria-controls="skill-categories-expanded"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
var node = expand2.snapshotItem(0); 
// node.click();
var skills=[];
var skill = document.evaluate(path, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
var j=0;
for(var i = 0; i < skill.snapshotLength; i++) {
  skill.snapshotItem(i).click();
  j++;
}

Может кто-нибудь сказать мне какие изменения я должен сделать?