Javascript 如何在不使用 jquery append 的情况下插入元标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7711411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert metatag without using jquery append?
提问by TryHarder
I used the following jquery to insert a metatag into a html document.
我使用以下 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>
If possible, I'd like to insert the metatag without using jquery. Anyone have any ideas how I can do that?
如果可能，我想在不使用 jquery 的情况下插入元标记。任何人有任何想法我怎么能做到这一点？
I believe I will probably need to use document.getElementByTagName but I'm not sure how.
我相信我可能需要使用 document.getElementByTagName 但我不确定如何使用。
Just in case you are wondering, I am inserting the metatag into my html to to optomize the site for viewing with the iphone. Unfortunately, width=device-width is not an option as it doesn't play well with my ipad version.
以防万一您想知道，我将元标记插入到我的 html 中以优化站点以使用 iphone 查看。不幸的是，width=device-width 不是一个选项，因为它不适用于我的 ipad 版本。
回答by Kai
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);
回答by bob
You can also use "setAttribute" (rather than the "dot" notation) for weirdo attribute names (that contain non-alpha-numeric characters).
您还可以对奇怪的属性名称（包含非字母数字字符）使用“setAttribute”（而不是“点”符号）。
Example:
例子：
var iefix=document.createElement('meta');
iefix.setAttribute("http-equiv", "X-UA-Compatible");
iefix.setAttribute("content", "IE=Edge");
document.getElementsByTagName('head')[0].appendChild(iefix);
The example above causes IE (<=9) to always use the latest document standards mode. Sometimes IE will fall back to older standards, and therefore break your modern javascript / canvas web app.
上面的示例导致 IE (<=9) 始终使用最新的文档标准模式。有时 IE 会退回到旧标准，因此会破坏您的现代 javascript/canvas 网络应用程序。
回答by Jan Pfeifer
Javascript solution:
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;">';
回答by Benny Neugebauer
Here is a solution that creates a meta tag, if it does not already exist:
这是一个创建元标记的解决方案，如果它不存在的话：
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);
