Question

是否可以将一个HTML元素转换为文档的多个位置，就像在MediaWiki中一样？我想在其他元素中包含元素，而不复制和粘贴其内容。我知道可以使用iframe在其他网页中嵌入网页，但有没有可靠的方法将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>标记。
转换功能会自行返回链接。

http://jsfiddle.net/bcWjE/1

Answer 2

使用jQuery：

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

JsFiddle

Answer 3

使用jQuery's .clone() method可能更合适，{{3}}执行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>

如何在文档中转换HTML元素

3 个答案: