如何用 js 填充空的 div?

Question

目的是仅在我点击按钮时在执行搜索后访问特定的端点，但我发现使用 JS 很难做到这一点。我有一个在html端点中呈现的 HTML，我希望该 html 文件填充我在另一个 HTML 文件中创建的空div。我正在尝试使用原版JS实现这一点，但我看到的所有答案都在JQuery中，我真的不了解JS

实现搜索好友。

def results(request):
if request.method == "GET":
search_query = request.GET.get("username")
searched_user = UserProfile.objects.filter(
user__username__contains=search_query
)
return render(
request, "toggle.html", {
"searched_user":searched_user
})
else:
return HttpResponse("Search returned nothing")

rendering html to fill empty div

def html(request): 
return render(request, 
template_name= "search_results.html"
)

index.html

<p>Welcome</p>
<form id="search" method="GET" action="{% url 'results' %}" placeholder= "Search for user" 
autocomplete="off">
{{form}}
<input type="submit" value="search" name="search">
</form>

search_results.html

{% extends "base.html" %}
{% block  spotify %}
{%if searched_user %}
{% for each_searched_user in searched_user %}
<br/>{% for liked_songs in each_searched_user.liked_songs.all %}{{liked_songs}}<br/>
{% endfor %}
{% endfor %}
{% endif %}
{% endblock %}

toggle.html

{% extends "base.html" %}
{% block  spotify %}

<div id="div">
</div>
<button id=likedsongsbutton>View liked songs</button>
<script>
var request = new XMLHttpRequest();
request.open('GET', '{% url "html" %}', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
var resp = this.response;
document.querySelector("#likedsongsbutton").addEventListener("click", 
() => {document.getElementById("div").innerHTML = resp
})}}; 
</script>
{% endblock %}

所以我尝试在toggle.html中填充空div，只有在我点击likedsongsbutton时才使用html端点.点击按钮目前没有任何作用

Answer 1

试试这个脚本而不是上面的脚本

<script>
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var resp = request.responseText;
// here as your response is string.

document.querySelector("#likedsongsbutton").addEventListener("click", 
() => {document.getElementById("div").innerHTML = resp
})}}; 
}
};
request.open('GET', '{% url "html" %}', true);
</script>