javascript - 如何在文档中嵌入 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

这有点 hack，但它适用于 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