2013-03-30 5 views
0

Я сомневаюсь в моем HTML-дизайне. У меня есть раздел <div> ... </div> в фиксированном положении. Я хочу повторить, что <div></div> в любом месте тега body.Html добавить div в другой div

Я попытался использовать jQuery и JavaScript по методу innerhtml('...'), after('...'), append('...'). Он работает, но я не хочу объяснять 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

Я не понимаю, о чем вы говорите * «Я хочу ** называть **, что'

'" * и * "Я не хочу ** объяснять ** 100 строк с кавычками" * , Нельзя «вызвать» элемент DOM. Вы также написали * «Это работает» * ... что именно работает и с чем еще возникают проблемы? –

+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); 
}); 

Это даст вам точный клон оригинала DIV и поместить его в каждом контейнере. Поскольку это точный клон, вам необходимо предотвратить конфликты id.

Другим способом является использование содержимого первого div, а не всего его.

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

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

Очевидно, что приведенный выше код написан, чтобы помочь сломать процесс, можно записать их как в более компактной форме.

Смежные вопросы