다른 html 값 가져오기 - daleun html gabs gajyeoogi

Question

* 로컬에서는 실행 결과를 확인할 수 없기 때문에 AutoSet(서버)을 사용해야 한다.

1. AutoSet10 설치하기 : https://2boki.tistory.com/128

2. 파일 업로드

<jq_1_news.html>, <jq_1_test.html> 이 두 개의 파일을

C:\AutoSet10\public_html\0706 이 경로에 업로드함 (제이쿼리도 업로드 할 것)

3. html 파일 구성

- jq_1_news.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script>
        
    </script>
</head>

<body>
    <p id="news_1">this is news 1</p>
    <p id="news_2">this is news 2</p>
</body>
</html>

- jq_1_test.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>
    <script src="js/jquery.min.js"></script>

    <script>
        $(function() {
            // load 메소드
            // $(요소 선택).load(url, data, 콜백함수);

            // jq_1_news.html에 있는 #news_1, #news_2의 값을 그대로 가져옴 (태그까지 모두)
            // 이를 #newsWrap_1, #newsWrap_2에 출력
            $("#newsWrap_1").load("jq_1_news.html #news_1");
            $("#newsWrap_2").load("jq_1_news.html #news_2");
        });
    </script>
</head>

<body>
    <h2>LOAD 1</h2>
    <div id="newsWrap_1"></div>
    <h2>LOAD 2</h2>
    <div id="newsWrap_2"></div>
</body>
</html>

4. 서버에 접속해서 확인해보기

http://localhost/0706/jq_1_test.html

'제이쿼리' Related Articles

html 안에 html을 넣고 싶었다.

html로 문서를 작성 중이었는데 하나의 파일이 너무 지저분해지는 것 같아서 각 세부내용들은 다른 파일에 작성하고 불러오는 것이 목적이었다.

위처럼 contents라는 id를 가진 div 안에 contents.html에 작성된 내용을 넣고 싶었다.

Javascript의 fetch를 이용해서 html text를 가져와 innerHtml을 이용하면 손쉽게 해결할 수 있었다.

물론 이 방법은 index.html을 그냥 브라우저에서 여는 형식으로는 동작하지 않는다. fetch를 이용하는 방법이기에 이 글을 읽는 사람이라면 알고 있을 것이다.

async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

async function importPage(target) {
    document.querySelector('#' + target).innerHTML = await fetchHtmlAsText(target + '.html');
}

위의 두 가지 함수만 이용하면 id로 요소를 검색한 뒤 해당 요소 안에 id와 동일한 파일명의 html을 넣을 수 있다.

이렇게 사용하면

contents라는 id를 가진 div 안에 contents.html의 내용이 들어가는 것을 확인할 수 있다.

Reference

stack overflow, How do I load an HTML page in a div using JavaScript?

HTML/JS/CSS/jQuery/Ajax ��亯
HOME > Q&A > HTML/JS/CSS/jQuery/Ajax ��亯

��

�� Ʈ�� ִ� �ٸ� html�� ±� �� !
�۾��	�ں��ũ��Ʈ��	�� ¥	18-02-25 00:26	�� ȸ	2643
��URL	https://www.phpschool.com/link/qna_html/291150 �� SyntaxHighlight��
�ȳ��Ͻʴϱ�. �� Ʈ�� ִ� �� ٸ� HTML��(A, B)�� ֽ��ϴ�. A.HTML�� B.HTML�� ִ� input�� մϴ�. �Ʒ� �ڵ�� 󿡼� ��õ� radio, �Էµ� input �� ڵ��Դϴ�. �� մϴ�. A.HTML ��Ͽ�� B.HTML�� Էµ� radio, input �� ? A.HTML��ٰ� �� ߰��غôµ� �ȵǳ׿� ��... [ �� Source ] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="save.js"></script> <h2>�Ʒ��ϼ��  �� ȭ��</h2> </head> <body> <iframe name="for_post" id="for_post" style="display:none" frame_border="0"></iframe> <form action="IP�ּ�/save.php" method="post" target="for_post"> <p>� �� : <input type="radio" name="workout" value="�� "/>�� <input type="radio" name="workout" value="��ͷ� ��"/>��ͷ� �� <br> ��Ʈ �� : <input class="setting" type="text" name="sets"/></br> �ݺ� �� : <input class= "setting" type="text" name="reps"/></br> �� : <input class="setting" type="text" name="weight"/> </p> <p><input type="submit"/></p> <table> <tr><th>��</th><th>��Ʈ</th><th>�ݺ�</th><th>�߷�</th></tr> <tr><td id="wo"></td><td id="st"></td><td id="rp"></td><td id="we"></td></tr> </table> <button onclick="printing()">��Ʈ ��</button> <script> function printing(){ var workout=$("input[type=radio][name=workout]:checked").val(); var userset=document.getElementsByClassName("setting"); alert(workout); //document.getElementById("WO").innerHTML=document.getElementById("sets").value; document.getElementById("wo").innerHTML=workout; document.getElementById("st").innerHTML=userset[0].value; document.getElementById("rp").innerHTML=userset[1].value; document.getElementById("we").innerHTML=userset[2].value; } </script> </form> </body> </html> �亯ä�� 100% ��õ 0 �� Ǿ��? ��õ 0 �� ȵ˴ϴ�.