如何嵌入文档中的 HTML 元素

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，因此在加载文档后此功能将不起作用。

• 我们使用虚拟占位符元素 a<br>来防止 的副作用document.write，例如在已打开但未终止的a<p>之后写入 a 会导致第一个标签过早终止。<p>

  换句话说，占位符元素的标签名称应该不同于任何未终止的外部标签的名称，因此是自终止<br>标签。

• 嵌入函数返回自身以进行链接。

http://jsfiddle.net/bcWjE/1