-
태그의 내용 텍스트 바꾸기JS 도라에몽 2023. 8. 30. 17:18
jquery 버전
= 뒤에다가 " "를 붙여서 쓴다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 기초</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;} button {width: 200px; background-color: cadetblue; border-radius: 5px;} </style> </head> <body> <p>문장입니다.</p> <button type="button" onclick="태그글자바꾸기()">태그글자바꾸기</button> <script> function 태그글자바꾸기(){ document.querySelector('p').innerHTML="문장이 바꼈습니다."; } </script> </body> </html>vanila javascript 버전
html(" ") 안에 바꾸고 싶은 내용을 쓴다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 기초</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;} button {width: 200px; background-color: cadetblue; border-radius: 5px;} </style> </head> <body> <p>문장입니다.</p> <button type="button" onclick="태그글자바꾸기()">태그글자바꾸기</button> <script> $(document).ready(function(){ 태그글자바꾸기 = function(){ $('p').html("문장이 바꼈습니다."); } }); </script> </body> </html>'JS 도라에몽' 카테고리의 다른 글
CHAT GPT가 골라준 자바스크립트 기능들 (0) 2023.09.06 자바스크립트 변수 (0) 2023.08.31 헤더에 마우스 올리면 depth2와 배경이 내려오는 기능 (0) 2023.08.30 비주얼스튜디오코드에서 내가 원하는 브라우저로 라이브서버 열기 (0) 2023.07.05 마우스 드래그로 좌우 너비 바꾸기 (0) 2023.07.05