Как включить HTML-элементы в документ

Question

Можно ли включить один элемент HTML в несколько мест документа, как в MediaWiki? Я хочу включить элементы в другие элементы, не копируя и не вставляя их содержимое. Я знаю, что возможно встраивать веб-страницы в другие веб-страницы с помощью iframes, но есть ли надежный способ встраивания элементов HTML в другие элементы HTML на той же странице?

<p id = "p1">This is paragraph 1. </p>
<p id = "p2">
    This is paragraph 2.
    </p>
<p id = "p3">This is paragraph 3. It should contain paragraphs 1 and 2.
    <!-- {{p1}} {{p2}} -->
</p>

Answer 1

Это что-то вроде хака, но оно работает в Firefox, Chrome и Opera. Не тестировался в IE, его нет на этом ноутбуке... дайте мне знать, если он работает в IE, если у вас есть возможность протестировать.

Поместите это в документ head, в script тег:

function transclude(elementId) {
    var clone = document.getElementById(elementId).cloneNode(true),
        placeholder;
    clone.id = null;
    document.write('<br id="__placeholder__">');
    placeholder = document.getElementById('__placeholder__');
    placeholder.parentNode.insertBefore(clone, placeholder);
    placeholder.parentNode.removeChild(placeholder);
    return transclude;
}

Чтобы включить элементы, используйте это:

<p id="p1">This is paragraph 1. </p>
<p id="p2">
    This is paragraph 2.
</p>
<p id="p3">This is paragraph 3. It should contain paragraphs 1 and 2.
    <script>transclude("p1")("p2")</script>
</p>

Заметки:

• Атрибут ID удален из клонированных элементов.

• Элементы включаются, как только скрипт, содержащий вызов transclude работает, не дожидаясь загрузки документа. Из-за использования document.write, это не будет работать после загрузки документа.

• Мы используем фиктивный элемент-заполнитель, <br>, чтобы предотвратить побочный эффект document.writeгде написание например <p> после <p> то, что было открыто, но не завершено, приводит к преждевременному завершению первого тега.

  Другими словами, имя тега элемента-заполнителя должно отличаться от имен любых неопределенных внешних тегов, таким образом, самозавершение <br> тег.

• Функция Transclusion возвращает себя для создания цепочки.

http://jsfiddle.net/bcWjE/1

Answer 2

Используя jQuery:

$(document).ready(function(){
  $('#p3').html($('#p1').html()+$('#p2').html())
});

JsFiddle

Answer 3

Возможно, более уместно использовать метод jQuery.clone(), который выполняет глубокое копирование узла DOM, сохраняя такие вещи, как связанные методы.

Тривиальный пример (из документов) применения $('.hello').clone().appendTo('.goodbye'); в

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

результаты в

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>