[자바 스크립트] text() 사용시 개행처리

1. 개요 

자바 스크립트 text() 사용 시 개행처리

2. 세부내용 

   일반 HTML tag 에서는 "<br/>"로 텍스트개행을 할 수가 있으나 
   스트립트를 이용하여 텍스트를 추가할 개항문자가 내용에 표시가 됩니다.
   아래와 같이 했을 경우 

$("#contents").text("오늘은 여기 까지 입니다. <br\>내일 부터 다른 내용을 진행하겠습니다.");

 

   내가 원하는 화면은 아래와 같으나 

   오늘은 여기 까지 입니다. 
   내일 부터 다른 내용을 진행하겠습니다.

   
   실행화면 은 아래와 같다
 

오늘은 여기 까지 입니다. <br> 내일 부터 다른 내용을 진행하겠습니다.

      
   인터넷 검색으로 찾은 방법
   첫번재 방법: 
   결론 안됨.
   var strTest = "테스트\n 합니다.\n 다시 한번\n테스트합니다.";
   strTest.replace(/\n/g, '<br/>');
   
   두번째 방법:
   좀더 복잡해 보이지만 역시 안됨.
   // p라는 태그 안에 text값을 지정 후
   // p의 html내용을 <br> 태그로 replace 해준다.
   var p = $(document.createElement("p")).text("테스트\n합니다.\n다시한번\n테스트 합니다.");
   p.html(p.html().replace(/\n/g, '<br/>'));
   
   세번째 방법 :
   결론 안됨.
   var yinfo =data ;
   yinfo = yinfo.replace(/(?:\r\n|\r|\n)/g, "<br />");
  $("#test").append(yinfo);
  $("#test").text(yinfo);

  인터넷을 찾아봤자 위내용이 거의 대부분이 었다.

  그래서 세번쨰 방법을 응용해 봤다. 인터넷을 검색해 보니 아래와 같은 함수가 있었다.

append()  : 컴텐츠를 선택된 요소 내부의 끝부분에 삽입 
prepend() : 컨텐츠를 선택된 요소 내부의 시작부분에 삽입

그래서 혹시나 하고  테스트 하기위해 아래와 같이 코드를 수정했다.

$("#contents").text("오늘은 여기 까지 입니다.");
$("#contents").append("<br\>내일 부터 다른 내용을 진행하겠습니다.");

 

결과 적으로 원하던 결과가 표시 됬다.

오늘은 여기 까지 입니다. 
내일 부터 다른 내용을 진행하겠습니다.

오늘은 여기까지...