0 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
</head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    (function(){
        var html = '<p>';
            html += 'Hello World';
            html += '</p>';

        $(document.body).innerHTML = html;  
        //document.body.innerHTML = html;
    })
</script>
<body>
</body>
</html>

$(document.body).innerHTML = html; // jQuery 之一也不起作用。文档.body.innerHTML = html; // 尝试查询 DOM 的普通 JS 也不起作用。

这里的实际问题是什么？我知道在使用 jQuery 时，我们不需要使用 innerHTML 来附加 HTML 内容，只是在尝试和学习它。

4

10 回答 10

7

您需要获取 dom 元素，$(document.body)返回一个没有innerHTML属性的 jQuery 包装元素

$(document.body).get(0).innerHTML = html;

或简单

document.body.innerHTML = html;

使用 jQuery

$('body').html(html)

看起来匿名函数也没有被调用

(function(){
    var html = '<p>';
    html += 'Hello World';
    html += '</p>';

    document.body.innerHTML = html;
})()

如果你需要等待 dom 准备好然后

jQuery(function($){
    var html = '<p>';
    html += 'Hello World';
    html += '</p>';

    $('body').html(html)
})
于 2013-08-22T08:57:56.380 回答
2

尽可能简单的html()是

  $('body').html(html);

工作演示

于 2013-08-22T08:59:09.233 回答
2

使用$.html()jQuery 的功能：

此方法使用浏览器的 innerHTML 属性。某些浏览器可能不会返回与原始文档中的 HTML 源完全相同的 HTML。例如，如果属性值仅包含字母数字字符，Internet Explorer 有时会省略属性值的引号。

var html = '<p>';
html += 'Hello World';
html += '</p>';

$(document.body).html(html);

活生生的例子：http: //jsfiddle.net/YTaRG/

于 2013-08-22T08:59:12.040 回答
1

更改$(document.body).innerHTML = html;为$(document.body).html(html);使用 jQuery 的正确方法。

或者

如果您不想使用方法，请更改$(document.body).innerHTML = html;为。$(document.body)[0].innerHTML = html;html()

于 2013-08-22T09:03:01.453 回答
1

你忘了一件事：

(function(){
});

这不会运行，你应该这样做：

$(function() {       
   //...
   //and then...
   $('body').html(html);
});

当您使用 jQuery 选择一个元素时，jQuery 会为其添加一个数组包装器，因此如果您想同时使用 jquery 选择器和原生 JavaScript html，您应该这样做：

$(document.body)[0].innerHTML = html;
于 2013-08-22T09:01:23.730 回答
1

这样做

<script>
   $(document).ready(function(){
     var html = '<p>';
        html += 'Hello World';
        html += '</p>';

     $('body').html(html);  
    })
</script>
于 2013-08-22T09:01:31.540 回答
1 
 (function(){
        var html = '<p>';
            html += 'Hello World';
            html += '</p>';

        $("body").html(html);  
        //document.body.innerHTML = html;
    })
于 2013-08-22T08:58:55.047 回答
1

实际上浏览器在加载之前运行你的脚本。您必须设置计时器或添加 onDomReady 事件

于 2013-08-22T08:59:47.450 回答
1

由于您使用的是 jQuery，因此您也可以使用 jQuery 方式执行此操作：

$(function(){
    var html = '<p>';
            html += 'Hello World';
            html += '</p>';

        $('body').html(html);  

});

JSFiddle

于 2013-08-22T09:00:33.863 回答
0

那个自执行功能不太对劲，需要把最后一行改成：

})();

但是即使你解决了这个问题，因为脚本在开始的 body 标记之前，它会在 body 被构建在 DOM 之前运行。如果您查看控制台，您会看到类似“无法设置属性 'innerHTML' of null”的异常。将脚本移入正文将解决此问题。

所以这里是原生的 JS 版本：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
</head>
<body>
    <script>
        (function(){
            var html = '<p>';
                html += 'Hello World';
                html += '</p>';
            document.body.innerHTML = html;
        })();
    </script>
</body>
</html>

然后这里是一个 jQuery 版本：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
</head>
<body>
            <script src="jquery.js"></script>
    <script>
        (function(){
            var html = '<p>';
                html += 'Hello World';
                html += '</p>';
            $('body').html(html);
        })();
    </script>
</body>
</html>
于 2013-08-22T09:35:19.950 回答