getElementById("bookmarksBarContent").appendChild(button) is interpreted as getElementById("PersonalToolbar").appendChild(button)

Question

"At the moment you can't overlay an element without an ID, so you need to use DOM methods to tweak the element you need in a load handler." - Xul Overlays

I'm trying! For record:

Using the Javascript Shell means using Firefox -> Tools -> ExtensionDeveloper -> Javascript Shell -> enumerateWindows() -> chrome://browser/content/browser.xul

function createBookmarkItem() {
    const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
    var item = document.createElementNS(XUL_NS, "toolbarbutton");
    item.setAttribute("id", "Testing-Doit-Button2");
    item.setAttribute("class", "bookmark-item pagerank");
    item.setAttribute("label", "PageRank");
    item.setAttribute("tooltiptext", "Do it!");
    item.setAttribute("oncommand", "testing_doit();");
    return item;
}

Using the Javascript Shell, I tried:

function placeBookmarkItem() {
    var bar = document.getElementById("bookmarksBarContent");
    var button = createBookmarkItem();
    bar.appendChild(button);
}

but the button was appended to the child of PersonalToolbar.

Using the Javascript Shell, I tried:

function placeBookmarkItem() {
    var bar = document.getElementById("bookmarksBarContent");
    var items = document.getElementsByClassName("bookmark-item");
    var button = createBookmarkItem();
    items[0].parentNode.appendChild(button);
}

but the button was appended to the child of PersonalToolbar.

How to solve this problem?