Question

<!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 one也不工作。 document.body.innerHTML = html; //正常的JS试图查询DOM也不起作用。

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

Answer 1

你需要获取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)
})

Answer 2

您可以使用html()进行简单

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

Working demo

Answer 3

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

此方法使用浏览器的innerHTML属性。有些浏览器可能不返回完全复制原始HTML源的HTML 文献。例如，Internet Explorer有时会离开如果属性值仅包含字母数字，则引用它们字符。

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

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

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

Answer 4

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

        $("body").html(html);  
        //document.body.innerHTML = html;
    })

Answer 5

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

Answer 6

由于您使用的是jQuery，您也可以使用jQuery方式：

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

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

});

JSFiddle

Answer 7

你忘了一件事：

(function(){
});

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

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

当你使用jQuery选择一个元素时，jQuery为它添加了一个数组包装器，所以如果你想同时使用jquery选择器和本机JavaScript html，你应该这样做：

$(document.body)[0].innerHTML = html;

Answer 8

这样做

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

     $('body').html(html);  
    })
</script>

Answer 9

将$(document.body).innerHTML = html;更改为$(document.body).html(html);，这是使用jQuery执行此操作的正确方法。

或

如果您不想使用$(document.body).innerHTML = html;方法，请

将$(document.body)[0].innerHTML = html;更改为html()。

Answer 10

自动执行功能不太正确，您需要将最后一行更改为：

})();

但即使你修复了这个问题，因为脚本在开始的body标签之前，它在DOM中构造主体之前就已经运行了。如果你观察控制台，你会看到一个例外，例如“无法设置属性'innerHTML'为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>

innerHTML无法在任何浏览器中运行

10 个答案: