Question

我正在使用HTML + jQuery。目前，html看起来像这样（＃1）：

<body>
    <div id="container">
        <div id="wrapper">
            other stuff
        </div>
    </div>
</body>

我希望HTML从头开始看起来像这样（＃2）：

<body>
    other stuff
</body>

我想使用jQuery将#container和#wrapper插入到DOM / HTML中，如＃1所示。我该怎么办？

Answer 1

我不确定你的意思，但中的那些元素已经存在于DOM中。如果你想动态地这样做，你可以这样做：

$(document).ready(function(){
  $('body').append('<div id="container"><div id="wrapper">other stuff</div></div>');
});

就是这样

使用javascript html模板，还有一些“干净”的方法可以做到这一点。那就是这样的：

<body>
  <!-- all your body content goes here -->
  <script type="text/html" id="mytemplate">
    <div id="container">
      <div id="wrapper">
        .. more stuff ..
      </div>
    </div>
  </script>
</body>

然后在你的javascript中：

$(document).ready(function(){
  $('body').append($('#mytemplate').text());
});

注意前脚本标记被定义为“text / html”而不是“text / javascript”的方式

祝你好运

Answer 2

根据更新的问题：

$(function(){
  var content = $('body').html();
  $('body').html('<div id="container"><div id="wrapper">'+content+'</div></div>');
});

Answer 3

function CreateDIVTag(divId,divContent){
 var tag = document.createElement('div');
 tag.id= divId;
 tag.innerHTML = divContent; 
 return tag;
}
var content = 'blah blah blah';

$(document).ready(function(){
$('body').append(CreateDIVTag('container',CreateDIVTag('wrapper',content)));

});

我会在这条线上做点什么。我不太热衷于字符串代码并且直接在js代码中使用标记。

jQuery - 包装页面

3 个答案: