innerHTML innerText textContent 차이점

 

innerText, innerHTML, textContent 세 친구 모두

 

DOM(Document Object Model)의 텍스트를 조작하는

 

프로퍼티(Property, 객체의 속성 중에서 값을 반환하거나 설정할 수 있는 속성.

 

다른 값과 연관되어 있는 어떤 값?)

 

---

 

innerHTML

 

<Element>의 속성

 

HTML 코드 자체를 반환

 

태그, 속성 등이 모두 함께 반환되는 것

 

response_json.forEach(todo => {
        if (todo.is_complete == false) {
            content.innerHTML += "<article><h4 id='todo" + todo.id + "'>" + todo.title + "</h4><p> 생성일 : " + todo.created_at.substr(0, 10) + "</p><p> 수정일 : "
                + todo.updated_at.substr(0, 10) + "</p><a class='contrast'><button onclick='TodoFinish(" + todo.id + ")'>"
                + "Finish" + "</button></a><a class='contrast'><button onclick='TodoDelete(" + todo.id + ")'>" + "Delete" + "</button></a></article>"
        }
        else {
            content.innerHTML += "<article><h4 id='todo" + todo.id + "'>" + todo.title + "</h4><p> 생성일 : " + todo.created_at.substr(0, 10) + "</p><p> 수정일 : "
                + todo.updated_at.substr(0, 10) + "</p><p> 완료일 : " + todo.completion_at.substr(0, 10)
                + "</p><a class='contrast'><button onclick='TodoDelete(" + todo.id + ")'>" + "Delete" + "</button></a></article>"
        }
    });

 

innerText

 

<Element>의 속성

 

text값만 다룬다

 

요소 내에서 사용자에게 실제 보이는 텍스트

 

숨겨진 요소는 나타나지 않음

 

async function TodoFinish(id) {
    const user = localStorage.getItem("payload")
    const user_parse = JSON.parse(user).user_id
    const todo = document.getElementById("todo" + id).innerText

    console.log(todo)
    const response = await fetch('http://127.0.0.1:8000/todo/' + user_parse + '/' + id + '/', {
        headers: {
            "Authorization": "Bearer " + localStorage.getItem("access"),
            'content-type': 'application/json',
        },
        method: 'PUT',
        body: JSON.stringify({
            "title": todo,
            "is_complete": true,
        })

    })

 

.innerText를 하지 않을 경우:

const todo = document.getElementById("todo" + id)
console.log(todo)

 

textContent

 

<Node>의 속성

 

요소 내부의 단순히 모든 텍스트를 반환

 

숨겨진 요소도 나타남

 

---

 

https://www.w3schools.com/jsref/prop_node_innertext.asp

HTML DOM Element innerText Property