var btn = document.getElementsByClassName("btn")[0];
var text = document.getElementsByClassName("text")[0];
btn.addEventListener("click",function(){
text.textContent = "안녕하세요 반갑습니다. \
날씨가 좋군요";
});
버튼을 클릭하게 되면 textContent 같은 경우는
결과가 다음처럼 줄 바꿈이 되지 않은 것을 확인하실 수 있습니다.
var btn = document.getElementsByClassName("btn")[0];
var text = document.getElementsByClassName("text")[0];
btn.addEventListener("click",function(){
text.innerHTML = "안녕하세요"+"<br>"+ "반갑습니다."+"<br>"+"\
날씨가 좋군요.";
});
innerHTML를 쓸 경우 중간에 html 태그를 넣을 수 있습니다.
중간에 슬래시 반대방향은 키보드\을 쓴 것입니다.
코드가 길어지면 줄 바꿈을 하기 위해서 사용한 것입니다.
이렇게 코드를 바꿔 준 다음 다시 실행해보면
이렇게 줄 바꿈이 잘 된 결과를 확인하실 수 있습니다.
정리
- textContent는 줄 바꿈이 생각한 것처럼 줄 바꿈이 되지 않는다.
- textContent 대신 innerHTML를 이용해서 HTML 태그를 이용하여 줄 바꿈을 한다.
var btn = document.getElementsByClassName("btn")[0];
var text = document.getElementsByClassName("text")[0];
btn.addEventListener("click",function(){
text.textContent = "반갑습니다.";
});
이렇게 먼저 text를 만들어준 다음 아래에서 textContent를 이용하는 방법이 있습니다.
이 외에도 짧은 코드에서 확인이 가능하다면
text라는 변수를 만들 필요 없이 바로도 가능합니다.
var btn = document.getElementsByClassName("btn")[0];
btn.addEventListener("click",function(){
document.getElementsByClassName("text")[0].textContent = "반갑습니다.";
});
이렇게 버튼을 클릭하게 되면 '반갑습니다.'로 바뀌는 것을 확인하실 수 있습니다.
정리
- 변경하고자 하는 글에 클래스를 붙인 다음 자바스크립트 파일에 getElementsByClassName을 통해 가져옵니다.
- 이후 버튼 클릭시 변경하고자 하는 글에 위에서 선언한 변수를 가져온 다음 textContent를 이용하여 변경합니다.
