如何transclude文档中的HTML元素

是否可以将一个HTML元素转换为文档的多个位置，就像它在MediaWiki中一样？我想将元素包含在其他元素中，而不需要复制和粘贴其内容。我知道可以使用iframe将网页嵌入到其他网页中，但是有没有可靠的方法可以将HTML元素嵌入其他HTML元素中？如何transclude文档中的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>

来源

2013-03-23 Anderson Green

你可能需要使用JavaScript这一点。 – 2013-03-23 03:31:52

@Tririar我给这个问题添加了JavaScript标签。感谢您指出了这一点。 :) – 2013-03-23 03:33:09

Asuming此代码工作，应该发生重复段落的'id'属性？他们不应该保持不变...他们应该被删除或更改？ – 2013-03-23 03:38:11

这将$('.hello').clone().appendTo('.goodbye');到

<div class="container"> 
    <div class="hello">Hello</div> 
    <div class="goodbye">Goodbye</div> 
</div>

结果是一个黑客位，但它在火狐，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; 
}

要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

来源

2013-03-23 04:47:36

使用jQuery：

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

JsFiddle

来源

2013-03-23 03:52:45 mutil

这将创建两个具有相同'id'属性的元素。另外我不相信OP在任何地方都提到了jQuery。 – 2013-03-23 04:03:08

可能更适合使用jQuery's .clone() method，其执行DOM节点的深层副本，perserving之类的东西结合的方法。

简单的例子（从文档）在

<div class="container"> 
    <div class="hello">Hello</div> 
    <div class="goodbye"> 
    Goodbye 
    <div class="hello">Hello</div> 
    </div> 
</div>

来源

2013-03-23 04:02:12 msanford

我可以与downvotes生活，但*添加评论*：downvoting没有评论服务没有有用的功能，回答者或OP。 – msanford 2013-11-04 16:59:28

如何transclude文档中的HTML元素

回答

相关问题