안녕하세요 오늘은 저번 자바스크립트 글자 바꾸는 법 글에 다른 방법을
알아보도록 하겠습니다.
저번 textContent 글 링크입니다. 혹시 필요하시다면 링크 남겨놓겠습니다.
https://didimdol20.tistory.com/77
JavaScript / JavaScript 클래스로 글자 바꾸기 / textContent
안녕하세요 오늘은 저번 글에 이어 자바스크립트 중 클래스 이름을 이용하여 속성을 바꾸는 방법을 알아보겠습니다. 클래스를 가지고 자바스크립트로 가져오는 방법은 저번 글을 참고해주세요
didimdol20.tistory.com
위 글 그러니깐 이전 글에선 document.getElmentsByClassName("클래스명")[0]; 를 이용하여
자바스크립트에서 textContent를 통해 글자를 변경했습니다.
그런데 이 방법을 사용할 때 만약 내용이 길어질 경우 생각한 것처럼 줄 바꿈이 되지 않는 점을
확인하실 수 있습니다.
가령 개발자가 콘텐츠 크기를 설정하고 텍스트를 많이 쓸 경우
안녕하세
요.
반갑습니
다.
이런 예시로 나올 수도 있지요. 티스토리만 해도 모바일 크기에 따라 달라지니깐요.
이때 줄 바꿈을 하기 위해선 각 줄마다 태그를 통해 써주시거나 아니면, 각각 위 방법으로 클래스를
하는 방법을 통해 바꿀 수도 있습니다.
하지만 번거로움이 있죠.
그때 사용하면 좋은 것이 innerHTML이 있습니다. 이를 통해서
html 태그 중 줄 바꿈 태그인 br를 추가해줄 수 있죠.
먼저 클래스를 가져오는 점은 textContent와 같습니다.
먼저 클래스를 통해 가져오는 방법이 있죠.
두 가지 방법은 이 전의 쓴 글을 참고해주세요.
https://didimdol20.tistory.com/76?category=1032931
javascript / 버튼 가져오기 / 버튼 클릭시 동작/ getElementByClassName / 클래스로 자바스크립트 에서 사
안녕하세요 오늘은 HTML에 작성된 태그를 클래스 이름으로 가져와서 자바스크립트에서 사용하는 방법을 알아보겠습니다. 다른 글 찾아보면서 이해하면서 하는 게 실력은 늘 테지만, 설명 글은
didimdol20.tistory.com
그럼 간단하게 사용법과 결과를 확인해보겠습니다.
그전에 먼저 비교를 위해 textContent를 보여드리겠습니다.
먼저 기본 HTML입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="text">안녕하세요</p>
<button class="btn">버튼</button>
<script src="blog.js"></script>
</body>
</html>
자바스크립트입니다.
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 태그를 이용하여 줄 바꿈을 한다.
감사합니다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| javascript / 자바스크립트 / textContent innerHTML value 차이 (0) | 2021.08.22 |
|---|---|
| javascript / 자바스크립트 아이디로 가져오기 / 아이디로 텍스트 변경하기 / getElementById / innerHTML / textContent (0) | 2021.08.22 |
| JavaScript / JavaScript 클래스로 글자 바꾸기 / textContent (0) | 2021.08.17 |
| javascript / 버튼 가져오기 / 버튼 클릭시 동작/ getElementByClassName / 클래스로 자바스크립트 에서 사용하기 (0) | 2021.08.16 |
| 주말에 뭐할까? / 주말에 뭐할지 테스트 질문을 통한 추천 /HTML Javascript (0) | 2021.07.02 |