如何在不使用 jquery append 的情况下插入元标记？答案

【问题标题】：How to insert metatag without using jquery append?如何在不使用 jquery append 的情况下插入元标记？
【发布时间】：2011-12-04 09:56:44
【问题描述】：

我使用以下 jquery 将元标记插入到 html 文档中。

<script type="text/javascript">
if(screen.width>=320 && screen.width<=767){
$('head').append('<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');}    
</script>

如果可能，我想在不使用 jquery 的情况下插入元标记。有人知道我该怎么做吗？

我相信我可能需要使用 document.getElementByTagName 但我不确定如何使用。

以防万一您想知道，我将元标记插入到我的 html 中，以优化网站以使用 iphone 进行查看。不幸的是，width=device-width 不是一个选项，因为它与我的 ipad 版本不兼容。

【问题讨论】：

出于好奇，您确定移动设备会在检查元标记之前运行您的 Javascript 吗？
我已经在 ipad 和 iphone 上测试过它，它可以工作。不过是个好问题。我不确定其他任何设备。以后我会试试安卓的。
实际上，我收回了这一点。我发现 iphone 并没有始终如一地检测到元标记（至少我认为这是问题所在）。有时它起作用，有时它不起作用。我想我会改用 php 并重定向到特定的移动页面。
我注意到“content”属性中的分号是错误的，应该是逗号：“width=320, initial-scale=1, ...”

标签： javascript append meta-tags getelementsbytagname

【解决方案1】：

var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

【讨论】：

【解决方案2】：

您还可以使用“setAttribute”（而不是“点”表示法）来表示怪异的属性名称（包含非字母数字字符）。

例子：

var iefix=document.createElement('meta');
iefix.setAttribute("http-equiv", "X-UA-Compatible");
iefix.setAttribute("content", "IE=Edge");
document.getElementsByTagName('head')[0].appendChild(iefix);

以上示例导致 IE (

【讨论】：

【解决方案3】：

Javascript 解决方案：

document.getElementsByTagName('head')[0].innerHTML += '<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">';

【讨论】：

【解决方案4】：

这是一个创建元标记的解决方案，如果它尚不存在：

var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
  var head = document.getElementsByTagName('head')[0];
  viewport = document.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);

【讨论】：