<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_text_html.html</title>
<!-- jQuery import -->
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h3>text()와 html() 함수</h3>
<button>입력!!</button>
<hr>
<div id="text"></div>
<div id="html"></div>
<script>
//본문에 있는 <button>요소 접근
$("button").click(function(){
// alert();
let txt = "<img src='../images/devil.png'>";
//JavaScript
document.getElementById("text").innerText = txt;
document.getElementById("html").innerHTML = txt;
//jQuery
$("#text").text(txt); //단순 문자열
$("#html").html(txt); //문자열이 마크업되면서(요소생성)
});//click end
</script>
</body>
</html>text()와 html() 함수
innerText로 txt 변수를 받았더니 문자열로 출력이 되고, innerHTML로 txt 변수를 받았더니 txt 변수의 <img> 태그에 있는 이미지 파일이 출력되었다.
jQuery 방식에서도 txt변수를 text()로 받으면 문자열, html()로 받으면 마크업 되어 요소가 생성된다.
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [42일] jQuery (6) - 반복문 (0) | 2022.09.26 |
|---|---|
| [42일] jQuery (5) - 속성 관련 메소드 (0) | 2022.09.26 |
| [42일] jQuery (4) - css 메소드 (0) | 2022.09.26 |
| [42일] jQuery (2) - 이벤트 (0) | 2022.09.26 |
| [42일] jQuery (1) - 다운로드 및 설정 (0) | 2022.09.26 |
