[JavaScript] Content 조작(1) : innerText, innerHTML, textContent

WEB/JavaScript

[JavaScript] Content 조작(1) : innerText, innerHTML, textContent

developer of the night sky 2023. 10. 10. 12:45

🔻Content 조작🔻

Content 조작한다는 것은 시작 태그와 끝 태그 사이의 내용물(PCDATA, 자식(Element) 조작하는 것이다.

접근법

1. innerText

시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티
문자열만 인식한다.
textContent와 동일한 기능을하지만 innetText는 MS에서 만든 비표준이다.

2. innerHTML(★)

시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티
문자열과 태그를 인식한다.

3. textContent

시작 태그와 끝 태그 사이의 문자열을 읽고 쓰는 프로퍼티
문자열만 인식한다.
표준

기본 뼈대

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>content</h1>

    <input type="button" value="버튼" id="btn1">
    <input type="button" value="버튼" id="btn2">

    <div id="div1">콘텐츠 영역</div>
</body>
</html>

innerText 와 textContent

    <script>
        document.getElementById('btn1').onclick = m1;
        function m1() {
            var div1 = document.getElementById('div1');

            //읽기
            alert(div1.innerText);
            alert(div1.textContent);

            //쓰기
            div1.innerText = '콘<b>텐</b>츠'
            div1.textContent = '콘<b>텐</b>츠'
        }
    </script>

innerText 와 textContent는 문자열만 인식하므로 태그를 문자열로 출력한다.

innerHTML

    <script>
        document.getElementById('btn1').onclick = m1;
        function m1() {
            var div1 = document.getElementById('div1');

            //읽기
            alert(div1.innerHTML);

            //쓰기
            // div1.innerHTML = '콘텐츠 수정2';
            div1.innerHTML = '콘<b>텐</b>츠'
        }
        
    </script>

innerHTML은 문자열과 태그를 인식하므로 b태그가 적용되어 출력되었다.

동적으로 태그 생성하기(innerHTML)

    <script>
        //동적으로 태그 생성하기
        document.getElementById('btn2').onclick = m2;
        function m2() {
            if (document.getElementById('div1').innerHTML=='') {
                div1.innerHTML += '<input type="text" value="콘텐츠">';
            } else {
                document.getElementById('div1').innerHTML='';
            }
        }
        
    </script>

innerHTML에 태그를 대입하여 동적으로 생성할 수도 있다.

🔻테이블 동적으로 생성하기🔻

기본 뼈대

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        fieldset {
            border: 1px solid #777;
            width: 200px;
        }
        fieldset > label {
            display: block;
            margin-bottom: 10px;
        }

        #tbl1 {
            border: 1px solid gray;
            border-collapse: collapse;
            margin-top: 20px;
        }

        #tbl1 td {
            border: 1px solid gray;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    
    <h1>테이블 생성하기</h1>

    <fieldset>
        <legend>행열</legend>
        <label>행: <select id="selrow"></select></label>

        <label>열: <select id="selcolumn"></select></label>
        <input type="button" value="생성하기" id="btn1">
    </fieldset>

    <table id="tbl1"></table>

</body>
</html>

id로 검색하기

    <script>
        var selrow = document.getElementById('selrow');
        var selcolumn = document.getElementById('selcolumn');
        var btn1 = document.getElementById('btn1');
        var tbl1 = document.getElementById('tbl1');
    </script>

select box 옵션 생성하기(초기화)

    <script>
        for (var i=1; i<=10; i++) {
            /* 방법1
            var op = new Option();
            op.value = i;
            op.text = i;
            */
            //방법2
            //var op = new Option(i,i);

            selrow.options.add(new Option(i,i));
            selcolumn.options.add(new Option(i,i));
        }

        //기본값 설정
        selrow.selectedIndex = 4;
        selcolumn.selectedIndex = 4;
    </script>

<tr>, <td> 동적 생성하기

    <script>
        btn1.onclick = m1;

        function m1() {
            var temp = '';      //누적변수
            
            for (var i=0; i<selrow.value; i++){ //행
                temp += '<tr>';
                for (var j=0; j<selcolumn.value; j++) { //열
                    temp += '<td>';
                    temp += i + ', ' + j;
                    temp += '</td>';
                }
                temp += '</tr>';
            }
            tbl1.innerHTML = temp;
        }

    </script>

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        fieldset {
            border: 1px solid #777;
            width: 200px;
        }
        fieldset > label {
            display: block;
            margin-bottom: 10px;
        }

        #tbl1 {
            border: 1px solid gray;
            border-collapse: collapse;
            margin-top: 20px;
        }

        #tbl1 td {
            border: 1px solid gray;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    
    <h1>테이블 생성하기</h1>

    <fieldset>
        <legend>행열</legend>
        <label>행: <select id="selrow"></select></label>

        <label>열: <select id="selcolumn"></select></label>
        <input type="button" value="생성하기" id="btn1">
    </fieldset>

    <table id="tbl1"></table>

    <script>
        var selrow = document.getElementById('selrow');
        var selcolumn = document.getElementById('selcolumn');
        var btn1 = document.getElementById('btn1');
        var tbl1 = document.getElementById('tbl1');
        
        //selectbox 옵션 생성하기
        //select box 초기화
        for (var i=1; i<=10; i++) {
            /* 방법1
            var op = new Option();
            op.value = i;
            op.text = i;
            */
            //방법2
            //var op = new Option(i,i);

            selrow.options.add(new Option(i,i));
            selcolumn.options.add(new Option(i,i));
        }

        //기본값 설정
        selrow.selectedIndex = 4;
        selcolumn.selectedIndex = 4;

        btn1.onclick = m1;

        //<tr>, <td> 동적 생성하기
        function m1() {
            var temp = '';      //누적변수
            
            for (var i=0; i<selrow.value; i++){ //행
                temp += '<tr>';
                for (var j=0; j<selcolumn.value; j++) { //열
                    temp += '<td>';
                    temp += i + ', ' + j;
                    temp += '</td>';
                }
                temp += '</tr>';
            }

            tbl1.innerHTML = temp;

        }

    </script>

</body>
</html>

저작자표시 (새창열림)