2013-03-30 3 views
0

내 HTML 디자인에 의심의 여지가 있습니다. 고정 된 위치에 <div> ... </div> 섹션이 있습니다. body 태그 내부 어디에서나 <div></div>을 다시 사용하고 싶습니다.HTML을 다른 div에 div를 추가하십시오.

나는 innerhtml('...'), after('...'), append('...')의 방법으로 jQuery와 JavaScript를 사용해 보았습니다. 그것은 작동하지만, 따옴표가있는 줄 100 개와 한 가지 더 설명하고 싶지는 않습니다. 한 번 이상 <div></div>을 포함하고 싶습니다.

샘플 코드 형식.

<html> 
<head> 
.... 
</head> 

<body> 
... 
    <div id='includes_div'>  <!-- It hides on form load --> 
     ... 
     ...  <!-- having 100 of lines --> 
    </div> 

    <div id='div1'> 
     <!-- want to include here --> 
     ... 
    </div> 


    <div id='div2'> 
     <!-- want to include here --> 
     ... 
    </div> 
</body> 
</html> 

jQuery 또는 JavaScript로 가능합니까?

+3

나는 "** ** ** ** ** ** ** ** ** ** ** ** ** 인용문이있는 줄을 설명하고 싶지는 않습니다. **" . 하나는 DOM 요소를 "호출"할 수 없습니다. 당신은 또한 * "It works"* ... 정확히 작동하고 아직도 문제가있는 것을 썼습니다. –

+0

아마 당신은 [templating] (http://mustache.github.com/)을 찾고 있습니다 – mplungjan

+0

제 샘플 코드가 그것을 분명히 설명하기를 바랍니다. – Ranjith

답변

5

이 작동합니다 :

var cont = $('#includes_div').html(); 
$('#div1').append(cont); 
$('#div2').append(cont); 
1

아래 두 내가 일반적으로 사용되는 참조하는이 작업을 수행 할 수있는 꽤 몇 가지 방법이 있습니다.

첫 번째

는 jQuery를 사용하고있는 '클론()'방법

var toClone = $('#includes_div'); 
var cloneContainers = $('#div1, #div2'); 

cloneContainers.each(function() { 
    var clonedDiv = toClone.clone(); 
    clonedDiv.attr('id', ''); 
    this.append(clonedDiv); 
}); 

이 당신에게 원래 사업부의 정확한 복제를주고 각 컨테이너에 넣어 것입니다. 정확한 클론이므로 ID 충돌을 방지해야합니다.

또 다른 방법은 전체 div가 아닌 첫 번째 div의 내용을 사용하는 것입니다.

var content = $('#includes_div').html(); 
var containers = $('#div1, #div2'); 

containers.each(function() { 
    this.append(content); 
}); 

분명히 위의 코드는 프로세스를 분석하는 데 도움이되도록 작성되었으므로 더 간결한 형식으로 둘 다 작성할 수 있습니다.

관련 문제