동적으로 html 을 연습하고자 할 때 textarea와 div 태그, 자바스크립트는 매우 유용하다. textarea 에 html 태그를 입력하고, div 태그에 태그를 붙이면 아주 간단한 코드에디터 정도는 제작이 가능하다. 자바스크립트의 document 객체의 value 속성으로 입력된 문자열을 읽고 innerHTML 속성으로 태그를 추가하는 방법이라면 가능하다.
문자열 html 태그 동적 추가 방법
textarea 에서 div 화면 표시
웹페이지를 만들 때 동적으로 태그를 추가할 필요가 있다.
테스트로 여러개 만들 수도 있지만 테스트 페이지 하나 만들어 두면 여러모로 쓸만 하다.
textarea 태그에 자신이 원하는 동적태그를 문자열로 작성한 후 특정 영역에 붙이는 것만으로도 나름 도움이 크다.
블록요소인 div 태그에 textarea 에서 작성한 태그를 붙여보도록 하자.
html textarea 태그의 문자열을 div 태그에 붙이는 방법
textarea 태그에서 html 을 작성하고 div 태그에 붙이는 방법은 코드에디터를 만드는 기본과정이기도 하다.
textarea 태그를 코드에디터처럼 만드는 것도 좋지만 여기서는 간단한 방법만들 표현한다.
위와 같은 작업은 아래의 단계를 따른다.
- textarea 의 문자열을 읽는다.
- 블록영역인 div 태그에 문자열을 붙인다.
html 구성하기
위의 작업을 구성하기 위해 3가지의 html 태그가 필요하다.
textarea, div, button 이다.
각각의 구성과 역할은 다음과 같다.
- textarea
html 태그를 작성하는 에디터의 역할을 한다. - div
textarea 에서 읽은 html 문자열을 추가하는 공간 - button
textarea 에서 입력된 문자열을 읽고, div 태그에 붙인다.
위의 html 구성에 대한 코드는 다음과 같다.
<div>
<button id="readHtml">붙이기</button>
</div>
<div>
<textarea id="editHtml"></textarea>
</div>
<div>
<div id="viewHtml"></div>
</div>위의 코드에 대한 결과화면은 아래와 같다.
textarea 와 button 이 존재한다. div 영역도 있지만 별도로 표시하지 않았기 떄문에 보이지 않을 뿐이다.
textarea 태그의 문자열 읽기
textarea 태그에 입력된 값을 읽을 때는 document 객체의 value 속성을 사용한다.
아래는 textarea 의 value 속성을 사용하여 문자열을 읽는 방법을 나타낸다.
리턴값은 object이다.
var vObject = document.getElementById( "textarea ID" ).valuediv 태그에 문자열 붙이기
div 태그에 문자열을 추가할 때는 document 객체의 innerText 또는 innerHTML 속성을 사용한다.
innerText 는 문자열 그 자체로 특정 태그에 추가되지만, innerHTML 은 문자열로 되어 있는 태그들은 렌더링이 되는 점에서 차이가 있다.
아래는 div 태그에 문자열을 붙이는 방법이지만, div 외의 다른 태그도 적용이 가능하다.
document.getElementById( "div ID" ).innerHTML = "HTML 문자열";버튼 기능 만들기
이제 버튼에 기능을 추가해 본다.
여기에서 사용되는 버튼은 textarea 에 입력된 문자열을 읽은 후 div 태그에 추가하는 역할을 한다.
버튼에 클릭 이벤트리스너를 등록하고 위의 기능을 동작시킬 함수를 만들어 본다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() { /* without resources */ });
$(window).on('load', function() { /* with resources */
document.getElementById("readHtml").addEventListener('click',function (){
fnReadAndSetHtml();
});
});
</script>
<script>
var fnReadAndSetHtml = () => {
var vText = document.getElementById("txtHtml");
var vHtml = document.getElementById("viewDocument");
vHtml.innerHTML = vText.value;
};
</script>전체 코드와 결과화면
이제 위에서 언급한 내용에 대한 전체적인 코드를 보자.
큰 차이는 없다. textarea 의 문자열을 읽고, div 태그에 동적으로 태그를 붙여 html에 대한 실시간 테스트 구조를 파악할 수 있다.
아마 욕심있는 사람이라면 코드에디터를 만들어 보고자 도전할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea to div</title>
</head>
<body>
<div>
<button id="readHtml">붙이기</button>
</div>
<div>
<textarea id="editHtml"></textarea>
</div>
<div>
<div id="viewHtml"></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() { /* without resources */ });
$(window).on('load', function() { /* with resources */
document.getElementById("readHtml").addEventListener('click',function (){
fnReadAndSetHtml();
});
});
</script>
<script>
var fnReadAndSetHtml = () => {
var vText = document.getElementById("editHtml");
var vHtml = document.getElementById("viewHtml");
vHtml.innerHTML = vText.value;
};
</script>
<style>
</style>
</html>결과화면은 다음과 같다.
textarea에 임의로 입력한 문자열과 html 태그를 div 태그에 동적으로 붙이고 테스트를 해 보았다.
코드에디터와 같은 화려함이나 기능은 부족하지만 실시간으로 뭔가 학습하기 괜찮은 기능이 나온 느낌이다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 문자열 정규식 플래그 패턴의 동작을 결정한다 (0) | 2023.02.21 |
|---|---|
| 자바스크립트 정규표현식 사용 Regular Expression 문자열의 패턴 찾기 (0) | 2023.02.17 |
| 자바스크립트 document 객체의 innerHTML innerText 차이 (0) | 2023.02.03 |
| 자바스크립트 화살표 함수 사용법 3가지 인자값과 리턴값 (0) | 2023.01.28 |
| 자바스크립트 화살표 함수 뜻과 의미 = () => arrow function (0) | 2023.01.28 |
댓글