是否可以将一个 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>
最佳答案
这有点 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>
标签。嵌入函数返回自身以进行链接。
关于javascript - 如何在文档中嵌入 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15583024/