javascript를 사용하여 div/span 태그를 텍스트 영역에 삽입하는 방법은 무엇입니까?

Question

내 html 파일에 텍스트 영역이 있고 텍스트 줄이 .js 파일에 추가됩니다. 선들이 다른 색으로 보이기를 바랍니다. 그래서 span/div 태그 (각 줄마다 다른 색상을 설정하기 위해)에이 줄을 감싸고 내 텍스트 영역에 삽입하고 싶습니다.

내 텍스트 영역은 다음과 같습니다

<textarea class="history" cols="150" rows="5" readonly="true"></textarea> 

를 내의 .js 코드입니다 :이 코드를 실행하면, 내가 사업부는 텍스트 영역의 HTML 코드 아래에 추가되는 것을 볼 수 있습니다

var div = document.createElement('div'); 

div.setAttribute("color", "green"); 
div.innerHTML = "hi! there"; 

document.querySelector(".history").appendChild(div); 

. 하지만 텍스트 ("안녕하세요! 거기")과 내 div는 페이지의 텍스트 영역에 표시되지 않습니다.

아무도 도와 줄 수 있습니까?

Answer 1

는

<p contenteditable="true"> 
    <h1>This is a paragraph.</h1> 
    It is editable. Try to change this text. 
</p> 

에 appendChild 함수는 타겟 요소 후의 소자 덧붙의 contentEditable 속성을 사용한다.

요소 내부에 내용을 넣으려면 div에서 사용한 것처럼 innerHTML을 사용하십시오.