[jQuery] API Documentation : .html()
https://api.jquery.com/html

 

Example [1]
Click a paragraph to convert it from html to text.

(1) p 태그의 마진 8px, 글자크기 20px, 글자색 blue, 커서 pointer
(2) b 태그에 밑줄
(3) buttin 태그에 커서 pointer
(4) p태그를 누르면 단락을 html에서 텍스트로 변함

▼ 예제 상세 보기 및 답안

https://api.jquery.com/html#example-0

 

▼ 나의 풀이

<body>
    <p><b>Click</b> to change the <span>html</span></p>
    <p>to a <span>text</span> node.</p>
    <p>This <button>button</button> does nothing.</p>
    <script>
        $(function() {
            $("b").css("text-decoration", "underline");
            $("p")
            .css("margin", "8px")
            .css("font-size", "20px")
            .css("color", "blue")
            .css("cursor", "pointer")
            .click(function() {
                var str = $(this).html();
                $(this).text(str);
            })
        });
    </script>
</body>

 

 

 

Example [2]
Add some html to each div.
(1) .html()로 span 태그에 <span class='red'>Hello <b>Again</b></span>를 추가한다.
(2) .css()로 red class의 글자색을 red로 바꾼다.

▼ 예제 상세 보기 및 답안
https://api.jquery.com/html#example-1-0

 

▼ 나의 풀이

<body>
    <span>Hello</span>
    <div></div>
    <div></div>
    <div></div>
    <script>
        $(function() {
            $("div").html("<span class='red'>Hello <b>Again</b></span>");
            $(".red").css("color", "red");
        });
    </script>
</body>

 

 

 

Example [3]
Add some html to each div then immediately do further manipulations to the inserted html.

(1) div 태그의 글자색 blue, 글자크기 18px
(2) div 태그에 .html로 <b>Wow!</b> Such excitement... 추가
(3) b 태그에 !!! 느낌표 추가
(4) b 태그 글자색 red

▼ 예제 상세 보기 및 답안
https://api.jquery.com/html#example-1-1

 

▼ 나의 풀이

- .append(document.createTextNode()) 답안 참고

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        $(function() {
            $("div")
            .css("color", "blue")
            .css("font-size", "18px")
            .html("<b>Wow!</b> Such excitement...");
            $("b")
            .append(document.createTextNode("!!!"))
            .css("color", "red");
        });
    </script>
</body>

 

 

'.　jQuery' 카테고리의 다른 글

[jQuery] API Documentation : .click() 예제 연습  (0) 2021.08.21
[jQuery] API Documentation : .css() 예제 연습  (0) 2021.08.21

티스토리툴바