728x90

onclick

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Output</title>
</head>
<body>
	<h1>HTML DOM 요소를 이용한 innerHTML 프로퍼티</h1>
	<p id="text">이 문장을 바꿀 것입니다!</p>
  <button onclick="a()">버튼</button>
	
	<script>
      function a() {
        var str = document.getElementById("text");
		str.innerHTML = "이 문장으로 바뀌었!";
      }
	</script>
	
</body>
</html>


제이쿼리를 이용해 id값으로 클릭

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>JavaScript Output</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<h1>HTML DOM 요소를 이용한 innerHTML 프로퍼티</h1>
	<p id="text">이 문장을 바꿀 것입니다!</p>
  <button id="a">버튼</button>
	
	<script>
       var str = document.getElementById("text");
      $('#a').click(function(){
		 str.innerHTML = "이 문장으로 바뀌었!";
     });
	</script>
   
  </body>
</html>


자바스크립트로 html상 날짜 가져오기

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Apply</title>
	<script>
		function printDate() {
			document.getElementById("date").innerHTML = Date();
		}
	</script>
</head>

<body>
    
    <h1>head 태그 내의 자바스크립트</h1>
	<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
	<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
	<p id="date"></p>

</body>

</html>
var date1 = new Date(); // 현재 날짜 및 시간
var date2 = new Date(1991,11,25,3,50); // 1991년 12월 25일 3:50:00 (월 +1 주의)
var date3 = new Date('2014-6-4'); // 2002년 1월 1일 09:00:00
var date4 = new Date('2012-05-17 10:20:30'); // 2012년 5월 17일 10:20:30

dororongju.tistory.com/116

 

[자바스크립트] Date() 기본 사용 방법

Date() 기본 사용 방법 Date 객체 생성 1 2 3 4 var date1 = new Date(); // 현재 날짜 및 시간 var date2 = new Date(1991,11,25,3,50); // 1991년 12월 25일 3:50:00 (월 +1 주의) var d..

dororongju.tistory.com

 



innerText, innerHTML

 

innerText는 태그안의 text만 가져오고

innerHTML은 태그까지 전부다 가져온다.

https://hianna.tistory.com/480

 

[Javascript] innerText와 innerHTML의 차이점

innerText와 innerHTML은 단순한 텍스트만 다룰 경우에는 차이가 없어 보입니다. 이 두 속성은 다루는 값이 text element인지, html element인지에 따라 차이가 납니다. 값 가져오기 (innerText vs innerHTML) A B..

hianna.tistory.com

 


innerText는 텍스트를 입력할 수있고 (글자만 출력)
innerHTML은 속성까지 입력이 가능하다. (css나 스크립트까지)
위의 링크에 들어가서 두번째 예시ㄱㄱ


innerContent, innerText, innerHTML 차이

innerHTML은 태그까지 전부다 가져오고
innerText는 화면에 출력되는 텍스트값만 가져오고
innerContent는 화면에 숨겨진 텍스트까지 가져온다.

https://hianna.tistory.com/483?category=764998

 

[Javascript] innerHTML, innerText, textContent 차이점

innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. innerHTML과 innerText의 차이점은 지난 포스팅에서 살펴보았습니다. [Javascript] innerT..

hianna.tistory.com


 

728x90

+ Recent posts