[Django]Replace HTML Content with JavaScript

CodingEntrepreneurs Django 강의 정리

innerHTML>

const content = element.innerHTML;

element.innerHTML = htmlString;

 

1. 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정

 

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

Element.innerHTML

 

home.html>

<!-- templates/pages/home.html -->

{% extends 'base.html' %}

{% block head_title %}
This is amazing!!!!
{% endblock head_title %}
{% block content %}
Welcome to Tweetme 2
<div id='tweets'>
    Replace me
</div>
<script>
    const tweetsElement = document.getElementById("tweets") // $("#tweets") get an html element
    tweetsElement.innerHTML = 'Loading...'  // set new html in that element

    var el1 = "<h1>Hi there 1</h1>"
    var el2 = "<h1>Hi there 2</h1>"
    var el3 = "<h1>Hi there 3</h1>"
    tweetsElement.innerHTML = el1 + el2 + el3

    const xhr = new XMLHttpRequest() // xhr = SomeClass()
    const method = 'GET' // "POST"
    const url = "/tweets"
    const responseType = "json"

    xhr.responseType = responseType
    xhr.open(method, url)
    xhr.onload = function () {
        // console.log(xhr.response)
        const serverResponse = xhr.response
        var listedItems = xhr.response.response
        console.log(listedItems)
    }
    xhr.send()
</script>
{% endblock content %}

 

결과물>