I am trying to clean up some code that I am writing and I had a thought: Would it be possible to set the inner HTML of a component using d3js like the code below?

d3.select("body").append("div").html(d3.html("../components/modal.html"));

If this is possible, what is needed to make it work, because right now, this only puts a text field on the page that says [object Promise]

Is this only wishful thinking?

EDIT: I am using Bootstrap 5 to implement my modal

UPDATE:
As I described in a comment below, I took the code from @SmokeyShakers answer---

d3.html("../components/modal.html").then((data) => {
      d3.select("body").append("div").html(data)
    })

---and replaced the first .html(...) with .text(...) as so:

d3.text("../components/modal.html").then((data) => {
      d3.select("body").append("div").html(data)
    })

This made it so that the modal would actually render, but the buttons and other functionalities I had built into the modal wouldn't work. And for additional information, my modal buttons did not have an onclick="..." attribute in the inline HTML, but it was added using

d3.select('#my-modal-submit').on('click', ()=>{...})