jquery - jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
</head>
<body>
 
    <h1 id="intro">여기가 h1태그</h1>
    <p id="demo">여기가 p태그</p>
 
    <button onclick="myfunc()">버튼</button>
 
    <script type="text/javascript">
        function myfunc() {
            // var h1text = document.getElementById("intro").innerHTML;
            var h1text = document.getElementById("intro").childNodes[0].nodeValue;
            document.getElementById("demo").innerHTML = h1text;
        }
    </script>
 
    <!-- createElement, createTextNode, appendChild -->
 
    <p>"유해까지 송환" 北 vs 꿈쩍않는 美…트럼프 바라보는 南</p>
 
    <button>추가 텍스트</button>
 
    <script type="text/javascript">
        $(function() {
            $("button").click(function() {
                var txt1 = "<p>추가 텍스트1</p>"; // html 추가
                var txt2 = document.createElement("p"); // javascript 추가
                txt2.innerHTML = "추가 텍스트2";
                var txt3 = $("<p></p>").text("추가 텍스트3"); // jquery 추가    
                
                // 텍스트 뒤쪽에 추가
                $("body").append(txt1, txt2, txt3);
            });
        });
    </script>
    
</body>
</html>

jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

단축키

Articles