J-Query –

by 

<!
DOCTYPE html>
<html lang="ko">
<head>
<title>엘리먼트의 컨텐츠 조작</title>
<meta charset="UTF-8">
<!
--RWD-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!
--BS4 라이브러리-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!
--Jquery라이브러리-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!
--특수목적용 자바스크립트 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!
--최신버젼 자바스크립트 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<p id="test1">This is a paragraph</p>
<p id="test2">This is another paragraph</p>

<p>input field:<input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>

<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#test1").text("Hello World"); //(문자열만)문자열로 변경
	});
	$("#btn2").click(function(){
		$("#test2").html("<b>Hello World<b>"); //태그를 포함한 HTML코드로 변경
	});
	$("#btn3").click(function(){
		$("#test3").val("Moon"); //form요소의 value속성값을 변경
	});
});
</script>
<br/>
</body>
</html>
'추천 관련글,