* 로컬에서는 실행 결과를 확인할 수 없기 때문에 AutoSet(서버)을 사용해야 한다. 1. AutoSet10 설치하기 : //2boki.tistory.com/128 2. 파일 업로드 <jq_1_news.html>, <jq_1_test.html> 이 두 개의 파일을 C:\AutoSet10\public_html\0706 이 경로에 업로드함 (제이쿼리도 업로드 할 것) 3. html 파일 구성 - jq_1_news.html - jq_1_test.html
4. 서버에 접속해서 확인해보기
//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 | |
| //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���ٰ� �� �߰��غôµ� �ȵdz� ��... [ �� �������� ���� Source ] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="//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 title="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>
|