3

是否可以像在 MediaWiki 中那样将一个 HTML 元素嵌入到文档的多个位置？我想在其他元素中包含元素，而不复制和粘贴它们的内容。我知道可以使用 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>
4

3 回答 3

2

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

于 2013-03-23T04:47:36.937 回答
1

使用 jQuery：

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

提琴手

于 2013-03-23T03:52:45.200 回答
0

使用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>
于 2013-03-23T04:02:12.077 回答