투케이2K

371. (javaScript) [간단 소스] 자바스크립트 span 스팬 태그 데이터 쓰기 방법 - innerText , textContent , innerHTML 본문

JavaScript

371. (javaScript) [간단 소스] 자바스크립트 span 스팬 태그 데이터 쓰기 방법 - innerText , textContent , innerHTML

투케이2K 2025. 2. 18. 20:30

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / span / text

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">




    <!-- ==================================================== -->
    <!-- 반응형 구조 만들기 -->
    <!-- ==================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">





    <!-- ==================================================== -->
    <!-- 내부 CSS 스타일 지정 -->
    <!-- ==================================================== -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;    
        }

    </style>






    <!-- ==================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ==================================================== -->
    <script>

        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("======================================================");
            console.log("[WebFile] : [window onload] : [start]");
            console.log("======================================================");
            console.log(""); 
            

            // [body 에 선언한 span 태그 아이디 지정]
            let mySpan_1 = document.getElementById("mySpan_1");
            let mySpan_2 = document.getElementById("mySpan_2");
            let mySpan_3 = document.getElementById("mySpan_3");
    

            // [span 태그에 내용 쓰기]
            mySpan_1.innerText = "투케이2K";  // [순수한 텍스트 변경]
            mySpan_2.textContent = "투케이2K";  // [동일한 효과]
            mySpan_3.innerHTML = "<b>투케이2K</b>";  // [HTML 적용 가능]


            // [span 태그 내용 읽기]
            console.log("");
            console.log("======================================================");
            console.log("[mySpan_1.innerText] : " + mySpan_1.innerText); // [화면에 표시 되는 텍스트 만 읽음]
            console.log("-------------------------------------------");
            console.log("[mySpan_2.textContent] : " + mySpan_2.textContent); // [숨겨진 텍스트도 포함해서 읽음]
            console.log("-------------------------------------------");
            console.log("[mySpan_3.innerHTML] : " + mySpan_3.innerHTML); // [HTML 태그까지 포함해서 읽음]
            console.log("======================================================");
            console.log(""); 

        }; 

        
    </script>



</head>


<body>
    
    <span id="mySpan_1"> mySpan_1 </span>
    <span id="mySpan_2"> mySpan_2 </span>
    <span id="mySpan_3"> mySpan_3 </span>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[결과 출력]
-----------------------------------------------------------------------------------------

======================================================
[mySpan_1.innerText] : 투케이2K
-------------------------------------------
[mySpan_2.textContent] : 투케이2K
-------------------------------------------
[mySpan_3.innerHTML] : <b>투케이2K</b>
======================================================

-----------------------------------------------------------------------------------------

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

373. (javaScript) [간단 소스] 자바스크립트 forEach 구문 사용해 ul li 태그 textContent 텍스트 값 변경 수행  (0) 2025.02.20
372. (javaScript) [간단 소스] 자바스크립트 forEach 구문 사용해 ul li 태그 value , innerText 속성 값 확인  (0) 2025.02.20
370. (javaScript) [간단 소스] 자바스크립트 span 스팬 태그 데이터 읽기 방법 - innerText , textContent , innerHTML  (0) 2025.02.18
369. (javaScript) [간단 소스] 자바스크립트 addEventListener input 사용해 input text 실시간 텍스트 변경 상태 확인  (0) 2025.02.04
368. (javaScript) [간단 소스] 자바스크립트 Object 오브젝트 객체를 URLSearchParams 사용해 query string 쿼리 스트링 변환 수행  (0) 2024.12.19
'JavaScript' Related Articles more
Comments