jquery append 和 javascript appendChild 在 html 标签期间不起作用答案

【问题标题】：jquery append and javascript appendChild not working for html tags periodjquery append 和 javascript appendChild 在 html 标签期间不起作用
【发布时间】：2011-07-16 03:35:42
【问题描述】：

我开始尝试在<head> 标签中添加元标签，但现在发现我无法向任何 html 标签添加任何内容。不是<body>、<p>、<h1>，但它适用于 div id 和类。

这是html

    <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="append.js"></script>
<title>appendTest</title>
</head>
<body>

<div id="test">
<p>
Hello World
</p>
</div>

</body>
</html>

这是我尝试过的 append.js 示例

    function loadmeta(){
var meta = "<meta name='og:title' content='some random content' />";
document.getElementsByTagName('head').item(0).appendChild(meta);
}

window.onload = function(){
loadmeta();
}




/*jquery style*/

$(document).ready(function(){
$('html').append('meta name="testing" content="some content"/>');
});

$(document).ready(function(){
$('meta name="testing" content="some content"/>').appendTo('html');
});

现在我用 div 的 p#test 尝试了 jquery 函数 append 和 appendTo，我可以用这两个函数追加到它。但是，我尝试了 head、body、p，但对它们中的任何一个都不起作用。

我开始怀疑我的服务器上是否有某种安全设置正在阻止它，因为我之前使用 append 来附加文本和 css 样式并附加到正文并且没有问题。

firebug 没有给出任何错误，我已经在 FF 和 Chrome 中尝试过。

虽然我不想觉得自己像个白痴，但如果有人看到我犯的一些愚蠢的错误，我会喜欢的。

谢谢

【问题讨论】：

标签： javascript jquery append appendto

【解决方案1】：

您的代码都不正确：

首先，对于您的仅 javascript 版本 appendChild 需要一个节点，而不是 HTML 字符串。

你可以这样做：

var meta = "<meta name='og:title' content='some random content' />";
var head = document.getElementsByTagName('head')[0];
head.innerHTML = meta+head.innerHTML;

您的 jQUery 方法都缺少开始的 HTML 标记。

【讨论】：

为什么不使用 createElement - 你在那里做的事情将根据浏览器进行 AFAIK，将 innerHTML 更改为浏览器认为的 innerHTML
感谢您的回复。我认为您建议的 javascript 方法有效。我假设在加载查看源代码的页面后，我会看到新的元标记，但我只能在 firebug 中看到它。至于jquery风格的功能，哎呀，我的意思是放“head”，而不是“html”，但是，“打开标签”是什么意思？在我看到的所有例子中，它只是 $('head').append('text');将一些文本附加到头部，我想将它放在头部标签之间。 html 标签的概念相同。还有比这更多的吗？
我的意思是meta前面的小于号。您正在附加 '元名称...' 您想要附加 '

【解决方案2】：

您没有正确创建元素

function loadmeta(){
  var meta = document.createElement("meta");
  meta.name='og:title'; // or meta.setAttribute("name","og:title");
  meta.content='some random content';
  document.getElementsByTagName('head')[0].appendChild(meta);
}

但是我什至不确定您的元标记是否会在页面加载后被解释

【讨论】：

谢谢，在您和 paulPro 之间，我现在看到了两种使用 javascript 实现这一目标的方法，它们对我来说都很有意义。就在源代码中看到的这两种方法而言，情况相同。它仅在我查看萤火虫时显示。这让我想知道在元标记插入后强制应用程序重新解析页面是否可行。我想知道如果我在查看源代码时看不到它，应用程序是否会在重新解析时看到新标签。不管怎样，你们回答了我的问题。谢谢