[JavaScript] createElement() , setAttribute()

티스토리 뷰

development/html javascript CSS

[JavaScript] createElement() , setAttribute()

Happyoon ~ 2021. 10. 14. 12:56

728x90

[createElement]

Document.createElement() 메서드는지정한 tagName의 HTML 요소를 만들어 반환한다.

즉, 반환값은 생성한 Element 이다.

tagName을 인식하지 못하면 HTMLUnknownElement (en-US)을 대신 반환한다.

createElement를 통해 페이지 로딩시점에는 없었던 요소를 원하는 시점에 동적으로 만들어 삽입할 수 있다.

삽입은 .append()를 통해서 한다.

삽입에 관련된 자세한 내용은 다음 게시물에서 다룰 예정!

let element = document.createElement(tagName[, options]);

tagName : 생성할 요소의 유형을 가리키는 문자열

options: is 속성을 가진 ElementCreationOptions 객체

반환값: 새로운 element

활용 예시

let p1 = document.createElement("p");

예제1

문제는 주석에

<!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>Step06_createElement.html</title>
</head>
<body>
    <h1>문서 객체를 javascript로 만들기</h1>
    <button id = "makeBtn">만들기</button>
    <div id = "one">
        

    </div>
    
    <script>
        /*
            페이지 로딩 시점에
            <p>p1입니다.</p>
            모양의 요소를 javascript로 만들어서 위의 div에 추가해보세요.
        */
        let p1 = document.createElement("p");
        p1.innerText = "p1입니다.";
        document.querySelector("#one").append(p1);
        

        /*
            만들기 버튼을 누르면 
            <p> 버튼으로 추가 </p>
            모양의 요소를 javascript로 만들어서 위의 div에 추가헤보세요.
        */
       document.querySelector("#makeBtn").addEventListener("click",function(){

            let p2 = document.createElement("p");
            p2.innerText = "버튼으로 추가";
            document.querySelector("#one").append(p2);

       });

    </script>
</body>
</html>

결과값

예제2

문제는 주석에

<!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>Step06_createElement2.html</title>
</head>
<body>
    <input type="text" id = "inputMsg" placeholder="메세지 입력...">
    <button id = "addBtn">추가</button>
    <ul id = "msgList">
        <li>하나</li>
        <li>두울</li>
    </ul>
    <script>
        /*
        input 요소에 메세지를 입력하고 추가 버튼을 누르면
        li 요소가 동적으로 만들어지고
        입력한 메세지는 li 요소의 innerText로 출력해서
        ul 요소의 자식요소로 추가해보세요.
        */

        document.querySelector("#addBtn").addEventListener("click",function(){
            //1. 입력한 문자열 읽어오기
            let msg = document.querySelector("#inputMsg").value;
            //2. li 요소 만들기
            let lst = document.createElement("li");
            //3. li 요소의 innerText에 읽어온 문자열 넣어주기
            lst.innerText = msg;
            //4. ul 요소의 자식 요소로 추가하기
            document.querySelector("#msgList").append(lst);
        });
    </script>
</body>
</html>

결과값

[setAttribute]

Element.setAttribute() 메서드는 지정된 요소의 속성 값을 설정한다.

속성이 이미 있는 경우에는 값이 업데이트 된다.

속성의 현재 값을 얻으려면 getAttribute()를, 속성을 제거하려면 removeAttribute()를 호출한다.

Element.setAttribute(name,value);

반환값: undefined

예외

InvalidCharacterError DOMException : 지정된 속성 name에 속성 이름이 유효하지 않은 문자가 포함되어 있을 때 나오는 오류

활용 예시

//만든 요소에 src 속성 추가하기
imgs.setAttribute("src","images/kim1.png");
//만든 요소에 alt 속성 추가하기
imgs.setAttribute("alt","김구라 이미지");

예제3

문제는 주석에

<!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>Step06_createElement3.html</title>
</head>
<body>
    <button id ="addBtn">이미지 추가</button>
    <div id = "one">


    </div>
    <script>
        /*
            이미지 추가 버튼을 누르면
            <img src = "images/kim1.png" alt = "김구라 이미지">
            요소를 만들어서 위의 div에 추가
        */
        document.querySelector("#addBtn").addEventListener("click",function(){
           //1. img 요소 만들기
            let imgs = document.createElement("img");
           //2. 만든 요소에 src 속성 추가하기
            imgs.setAttribute("src","images/kim1.png");
           ///3. 만든 요소에 alt 속성 추가하기
            imgs.setAttribute("alt","김구라 이미지");
           //4. div에 imgs에 append 하기
            document.querySelector("#one").append(imgs);

        });

    </script>
</body>
</html>

결과값

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] this (0)	2021.10.14
[JavaScript] 요소 삽입 방법 / append(), beforebegin, afterbegin, beforeend, afterend / insertAdjacentElement() (0)	2021.10.14
[JavaScript] if문 (0)	2021.10.13
[JavaScript] 반복문(2) forEach (0)	2021.10.13
[HTML/JavaScript/CSS]innerText와 value 관련 예제 (0)	2021.10.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

yoon's Devlog

티스토리 뷰