초기화 단계에서 JS로 요소를 이동하는 방법?

다음과 같은 코드가 있습니다:

javascripts/discourse/initializers 안에:

import { apiInitializer } from "discourse/lib/api";
import CustomHeaderTopicButton from "../components/custom-header-topic-button";

export default apiInitializer((api) => {
  api.renderInOutlet("below-site-header", CustomHeaderTopicButton);
  
  document.addEventListener("DOMContentLoaded", function() {
    const newTopicBtn = document.getElementById("new-topic-button");
    const sidebar = document.getElementById("d-sidebar");
    if (newTopicBtn && sidebar) {
      sidebar.insertBefore(newTopicBtn, sidebar.firstChild);
    }
  });
});

그런데도 버튼 요소가 사이드바로 이동하지 않습니다. 제가 뭔가 잘못하고 있는 건가요?

사이드바 상단에 버튼을 추가하려는 경우, 대신 before-sidebar-sections 플러그인 아웃렛을 사용하는 것이 좋습니다.

Ember가 생성한 HTML을 이동하는 것은 좋은 아이디어가 아닙니다.

그게… 실제로 존재해요?? 와, 감사합니다.