[JS / Javascript] .textcontent 한줄 띄기가 안될때 해결방법, when break line not woring - Solved

JAVASCRIPT

JS에서 textcontent로 텍스트 표시

JS를 사용하면 사용자의 동작에 따라 사이트를 동적으로 변경할 수 있는데, 보통 서버가 아닌 웹 사이트 자체에서 계산을 할때에는 Javascript를 많이 사용한다. (서버와 통신이 필요할 때는 ajax를 많이 사용한다.)

이때 특정 조건에서 <div classs="Target"></div> 이라고 할때 해당 div에 text를 입력하고자 한다면 아래와 같은 JS를 구성할 수 있다.

 

<div class="Target"></div>

<script>
//무엇인가 화면상에서 변경되면 변경될때의 상태를 가져오는 addEventListener
//이부분에는 "Click"이벤트를 넣어도 된다.
document.addEventListener('DOMContentLoaded', function(){

	//Class이름이 "Target"인 항목 가져오기
    //여러개면 for문으로 쪼개서 사용해야 한다, 기본적으로 가장 맨처음 가져오는 요소가 선택된다.
	const target = document.querySelector('.Target');
    
    target.textContent = `This Is Change`;
});


</script>

 

이렇게 하면 div사이에 "This Is Change"라는 텍스트가 입력된다.

 

div class="Target"에 페이지가 로딩되면서 텍스트가 입력된다.

 

---

 

JS 한줄 띄기가 안될때("/br"  "/r/n"  "/n"  "/n/n"  "<br>" "<br />" not working)

만일 중간에 한줄을 띄워주려고 할때 보통 <br />를 많이 쓰는데 textContent를 쓸때에는 이런것들이 동작하지 않는다.

그렇다고 div를 2개만들어서 따로 컨트롤하려고 하면 코드가 길어지는 문제가 있다.

해결방법은 아주 간단한다.

textContent 대신에 .innerHTML를 사용하면 된다.

<div class="Target"></div>

<script>
//무엇인가 화면상에서 변경되면 변경될때의 상태를 가져오는 addEventListener
//이부분에는 "Click"이벤트를 넣어도 된다.
document.addEventListener('DOMContentLoaded', function(){

	//Class이름이 "Target"인 항목 가져오기
    //여러개면 for문으로 쪼개서 사용해야 한다, 기본적으로 가장 맨처음 가져오는 요소가 선택된다.
	const target = document.querySelector('.Target');
    
    target.innerHTML = `This Is <br /> Change`;
});


</script>

<br>로 해도 된다.

 

결과

innerHTML

 

 

끝.