如何在不使用jquery追加的情况下插入元标记？

Question

我使用以下jquery将metatag插入到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,但我不知道如何.

为了防止你想知道,我将metatag插入到我的html中,以便用iphone来观看网站.不幸的是,width = device-width不是一个选项,因为它与我的ipad版本不兼容.

Answer 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);

Answer 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(<= 9)始终使用最新的文档标准模式.有时IE会回归到旧标准,因此会破坏您现代的javascript/canvas Web应用程序.

Answer 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;">';