Question

我对我的HTML设计有疑问。我在固定位置有一个<div> ... </div>部分。我希望在<div></div>标记内的任何位置重复使用body。

我使用jQuery和JavaScript尝试使用innerhtml('...')，after('...')，append('...')的方法。它有效，但我不想用引号解释100行，还有一件事。我希望不止一次地包括<div></div>。

示例代码格式。

<html>
<head>
....
</head>

<body>
...
   <div id='includes_div'>       <!-- It hides on form load -->
      ...
      ...     <!-- having 100 of lines -->
   </div>

   <div id='div1'>
       <!-- want to include here -->
      ...
   </div>


   <div id='div2'>
       <!-- want to include here -->
      ...
   </div>
</body>
</html>

是否可以使用jQuery或JavaScript？

Answer 1

这应该有效：

var cont = $('#includes_div').html();
$('#div1').append(cont);
$('#div2').append(cont);

Answer 2

有很多方法可以做到这一点，下面只是我看到的两种常用方法。

第一种是使用jQuery'clone（）'方法：

var toClone = $('#includes_div');
var cloneContainers = $('#div1, #div2');

cloneContainers.each(function() {
    var clonedDiv = toClone.clone();
    clonedDiv.attr('id', '');
    this.append(clonedDiv);   
});

这将为您提供原始div的精确克隆并将其放入每个容器中。因为它是一个精确的克隆，你需要防止id冲突。

另一种方法是只使用第一个div的内容，而不是整个内容。

var content = $('#includes_div').html();
var containers = $('#div1, #div2');

containers.each(function() {
    this.append(content);   
});

显然，上面的代码是为了帮助打破这个过程而编写的，可以用更紧凑的形式编写它们。

Html将div附加到另一个div中

2 个答案: