Adding a stored Text file and call it within <ul id

[Dom]

Hi everyone,
Been doing this on my own up till now and I am stuck. Hopefully this can be done.

I have a list of over 1000 text line Ex: "Party 1, Party 2..." all on different lines on one html page.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for title..">

<ul id="myUL">
<li class="invalid nav-item"><a href="Party 1.html">Party 1</a></li>
<li class="invalid nav-item"><a href="Party 2.html">Party 2</a></li>
...
...
</ul>

The text will have 10 more each weeks which makes it time consuming when I do it manually...

Now I have a .text file, which each line is sorted alphabetically and saved and I need to copy and paste each time I update the html file.

How would I delete the full

<li class="invalid nav-item"><a href="Party 1.html">Party 1</a></li> .... (all list)

within the html and call the text file which would have all text, about 1000, then when I add more text to the list it would update the list within the code section...

Don't know if it makes sense... but here is an example:

What is now:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for title..">

<ul id="myUL">
<li class="invalid nav-item"><a href="Party 1.html">Party 1</a></li>
<li class="invalid nav-item"><a href="Party 2.html">Party 2</a></li>
...
...
</ul>

Then Party 3 and 4 needs to be added so when the .text file is updated the new code and list will be updated to:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for title..">

<ul id="myUL">
<li class="invalid nav-item"><a href="Party 1.html">Party 1</a></li>
<li class="invalid nav-item"><a href="Party 2.html">Party 2</a></li>
<li class="invalid nav-item"><a href="Party 3.html">Party 3</a></li>
<li class="invalid nav-item"><a href="Party 4.html">Party 4</a></li>
...
...
</ul>

Would this be done easily with html and using css?