jQuery .html() 没有正确设置内容？答案

【问题标题】：jQuery .html() not setting content correctly?jQuery .html() 没有正确设置内容？
【发布时间】：2015-11-02 01:40:34
【问题描述】：

这是我准备的更容易说明问题的示例。

http://codepen.io/anon/pen/EVpYXm

如您所见，最初的<html> 设置为显示文本：

“这是旧的 html！”

它将整个内容设置为变量myHtml 中的数据。然而，这是我注意到的：

样式不是来自<body> 元素。此外，<body> 元素不知何故根本没有创建！

这里是 sring myHtml，整理后显示为 html：

<html>
<head>
<title>Title Here</title>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body style='background-color: red'>
<div>Div!</div>
</body>
</html>

我意识到，当链接元素被删除时，一切正常。试试看，自己看。

在过去的几个小时里一直被这个问题困扰。正在寻找结果。

这里是完整的代码：

页面html：

<html>
  This is the old html!
</html>

javascript：

$(function(){
  var myHtml = "<html><head><title>Title Here</title><link href='style.css' rel='stylesheet' type='text/css'/></head><body style='background-color: red'><div>Div!</div></body></html>"
  $("html").html(myHtml);
})

这个问题的主要目的是了解这种行为的原因以及找到最佳解决方案。

【问题讨论】：

而不是设置整个HTML部分的蛮力方法，只需根据需要更改小部分（例如仅设置div的HTML和样式）。
现在我正在寻找我上面描述的具体案例的答案。否则我会正常更换parti。
@JaromandaX 你检查过codepen链接吗？
请在您的问题中发布一个完整代码示例。如果无法访问 codepen，那么如果没有完整的示例，您的问题就会失去所有价值。也就是说，您希望href='style.css' 在您的示例中做什么？ codepen 将如何加载该样式表？
已发布完整代码。请刷新并检查。

标签： javascript jquery html dom

【解决方案1】：

问题在于，当您使用 jQuery 的 html(val) 时，它会执行以下操作：

html: function(value) {
  /* ... */
  // See if we can take a shortcut and just use innerHTML
  if ( typeof value === "string" && !rnoInnerhtml.test( value ) && /* ... */) {
    /* ... */ elem.innerHTML = value; /* ... */
  }
  /* ... */
}

也就是说，它使用正则表达式rnoInnerhtml检查字符串，即

rnoInnerhtml = /<(?:script|style|link)/i

因此，大概是为了避免插入样式表，jQuery 避免使用innerHTML 并使用domManip 做复杂的事情。

我推荐使用原生innerHTML:

$("html").prop('innerHTML', myHtml);

var myHtml = "<head><title>Title Here</title><link href='style.css' rel='stylesheet' type='text/css'/></head><body style='background-color: red'><div>Div!</div></body>"
$("html").prop('innerHTML', myHtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is the old html!

或者使用 vanilla-js：

document.documentElement.innerHTML = myHtml;

var myHtml = "<head><title>Title Here</title><link href='style.css' rel='stylesheet' type='text/css'/></head><body style='background-color: red'><div>Div!</div></body>"
document.documentElement.innerHTML = myHtml;

This is the old html!

【讨论】：

这也一样吗？ (innerHtml)
为什么以及谁反对这个？这有什么问题吗？
@Mia 是的，jQuery 的html 应该表现为innerHTML 的getter 或setter。我想我被jQuery fans which don't like vanilla-js 否决了。
大声笑，好的，谢谢。你让我投票赞成。但是我想了解我的问题是什么。

【解决方案2】：

问题是您在根 html 元素内附加了一个 html 元素，这是未定义的行为，浏览器无法可靠地呈现。从myHtml 字符串中去掉<html> 和</html> 的开头和结尾标签，它就可以工作了！

Working demo

$(function() {
  var myHtml = "<head><title>Title Here</title></head><body style='background-color: red; '><div>Div!</div></body>"
  $('html').html(myHtml);
})

或者，您可以保留标签并直接写入document 对象，这会打开一个新流并覆盖以前的文档。

// ...
document.write(myHtml);

【讨论】：

好吧。我试过了，但没有用！一定是打错了。
别担心，下次不要太快投反对票。 :)
@GuybrushThreepwood 感谢您提供答案 --- 在我目前的情况下，我需要 html 标签。我在生产版本中通过 ajax 加载完整页面，这只是一个过于简单的示例。
如果您删除链接元素，它也会开始工作。对我来说，这个问题的主要目的是了解这种行为的原因以及找到最佳答案
@GuybrushThreepwood 几乎就是我的情况。我只想在不更改 url 的情况下替换我的整个 html 文档。