I am using marked js to render a string containing markdown text to html div.
index.html

...
<div id="myDiv"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="index.js"></script>
...

index.js

...
function renderMarkdown() {
    let myDiv = document.querySelector('#myDiv');
    myDiv.innerHTML = marked.parse('# This is heading \n ## This is heading 2 \n ### This is heading 3 \n Let us write a quick text and sign off! Here is a list \n - Hello \n - World')
}

async function getMarkdownFile() {
    const response = await fetch('./content/hello.md', {
      method: 'GET',
    })
    .then(response => response.text())
    .then(data => {
      console.log(data);
    })
}
...

The markdown renders inside myDiv as expected.

I also have a folder in the same directory containing a bunch of markdown files. But, I am unable to import/use them in index.js file. I tried using fetch but, get this error:

As it is evident, it becomes very difficult to edit and read larger strings. Is there any better way to render markdown to the html (maybe by importing a markdown file)?
PS: I am using Vanilla Js.