[JavaScript] innerHTML, innerText, textContent 차이

JavaScript - createElement(), appendChild(), innerText

const json4 = {
	"result":["JohnWick",45,"남","NewYork"]
};

/*
td3[0].innerText = json4.result[0];
td3[1].innerText = json4.result[1];
td3[2].innerText = json4.result[2];
td3[3].innerText = json4.result[3];
*/

// el => td3[0]~td[4]
td3.forEach((el,idx)=>{
	el.innerText = json4.result[idx]
});

// ★★ 태그 요소 추가  => 목록 불러오기 시 사용

const dataDB = {
	'result':[
		{"userName":"name1","userAge":22,"userGender":"여","userAddr":"서울"},
		{"userName":"name2","userAge":52,"userGender":"님","userAddr":"부산"},
		{"userName":"name3","userAge":66,"userGender":"남","userAddr":"제주"},
		{"userName":"name4","userAge":32,"userGender":"여","userAddr":"광주"}
	]
};

const tbody = document.querySelector('#tbody');
// <tr> 태그 생성
const trTag = document.createElement('tr');

// tbody에 새로운 <tr> 태그 추가
tbody.appendChild(trTag);

// <td> 태그 생성

const tdTag0 = document.createElement('td');
const tdTag1 = document.createElement('td');
const tdTag2 = document.createElement('td');
const tdTag3 = document.createElement('td');

// <tr>에 새로운 <td> 태그 추가
trTag.appendChild(tdTag0);
trTag.appendChild(tdTag1);
trTag.appendChild(tdTag2);
trTag.appendChild(tdTag3);

// 추가된 <td> 태그에 값 입력

tdTag0.innerText = dataDB.result[i].userName;		
tdTag1.innerText = dataDB.result[i].userAge;
tdTag2.innerText = dataDB.result[i].userGender;
tdTag3.innerText = dataDB.result[i].userAddr;

// --------------------------------------------------------

const dataDB2 = {
	'result':[
		["name1",25,"남","서울"],
		["name2",44,"여","울산"],
		["name3",22,"남","춘천"],
		["name4",25,"여","제주"]
	]
};

for(let i=0; i<4; i++) {
	let trTag2 = document.createElement('tr');
	tbody.appendChild(trTag2);
	
	for(let j=0; j<4; j++) {
		let tdTag2 = document.createElement('td');
		
			tdTag2.innerText = dataDB2.result[i][j];
			trTag2.appendChild(tdTag2);

	}
}

filter