jQuery를 사용하여 단일 페이지 응용 프로그램에서 DOM을 업데이트하는 방법은 무엇입니까?

Question

이것은 정말 간단한 질문이지만 검색을 통해 답변을 찾지 못했습니다.

SPA를 만들 때 jQuery를 사용하여 콘텐츠를 업데이트하는 과정은 무엇입니까? 단순히 노드 내용을 삭제하고 새로운 HTML을 작성합니까?

이 같은 SPA 페이지가 있다고 가정 : 여기

이 문제는 명확하게하는 몇 가지 코드의

<div id='nav'> 
    <div class='link'>home</div> 
    <div class='link'>about</div> 
    ... 
</div> 

<div id='page_content'> 
    ... 
</div> 

비행 중계기 항목에 사용자가 클릭, jQuery를 콘텐츠에 대한 HTTP GET 않는 경우 : var content = .... 페이지를 업데이트하려면 페이지를 $('#page_content').html(content)으로 업데이트하면됩니까?

Answer 1

SPA에 의해이 같은 단일 페이지 솔루션, 뭔가 의미하는 경우 페이지를 새로 고치지 않고 외부 파일을로드하려면 ...

<!-- HTML --> 
<div id = "page-area" style = "width: 800; height: 600; border: 1px solid silver"></div> 

// Javascript 
$('#page-area').load('your-page.html'); 

// or 
$.get('your-page.html', function(data){ 
    $('#page-area').html(data); 
}); 

합니다.

또는 요소 컨텐츠 업데이트하려면 다음 요소는 기존의 스타일을 채택 이런 식으로 페이지에 추가하고 동일한 ID 속성이 다른 요소와 충돌 것

가

var pagecontent = "<h1>New Content</h1><p>Some new content</p>"; 

$('#page-area').html(pagecontent); 

참고.

Answer 2

당신이하는 일에 따라 달라집니다. ,

$("#divID").innerhtml("Hello World"); 

기타 :

$("#textBoxID").val("ValueYouWant"); 

당신은과 같이 테이블에 테이블 행을 추가 할 수 있습니다 :

$("#tableID").append("<tr<td>blahblah</td></tr>"); 

당신은 사업부의 HTML을 업데이트 할 수 있습니다

당신은 같은 텍스트 상자의 값을 변경할 수 있습니다 귀하의 질문은 매우 모호하지만, 이것이 도움이되기를 바랍니다.