Question

我正在尝试动态更新div，当我看到inspect元素时，我可以看到添加到div的内容但我在浏览器上看不到它。

<script ="text/javascript">
$(function () {
    var baseURL = 'aaa.html';
            //load content for first tab and initialize
     $.get('aaa.html', function (data) {
       var parser = new DOMParser()
       var el = parser.parseFromString(data, "text/html");
       var text = el.getElementById("container");
       var home_object = document.getElementById("home");
       var content = new XMLSerializer().serializeToString(text);
       home_object.appendChild(text) ;
       console.log(home_object);
       });
});
</script>

Answer 1

只有jQuery：

$.get('aaa.html', function (data) {
   var $content = $(data).find('#container');
   // this would replace 
   $('#home').html($content);

   // the following would append
   // $('#home').append($content);      
});

Answer 2

如果您不一定将新内容附加到现有内容，则可以使用jQuery的ajax .load()方法将代码缩减为：

$('#home').load( 'aaa.html #container' );

至于您没有在浏览器中看到内容，您可能会将display:none的课程应用于#home或您正在加载的部分或全部内容。你可能想尝试类似的东西：

   $('#home').load( 'aaa.html #container', function() {
       $(this).show();
   });

或者：

   $('#home').load( 'aaa.html #container', function() {
       $(this).find('*').show();
   });

当然，如果其中任何一个显示内容，那么您就知道应该修复您的CSS。

更改为div没有反映在浏览器上

2 个答案: