使用纯 JavaScript 在 html 头部插入新标签答案

【问题标题】：Insert new tags in html head with plain JavaScript使用纯 JavaScript 在 html 头部插入新标签
【发布时间】：2013-11-04 14:24:30
【问题描述】：

我需要在 html 头部插入新标签。不在文档中，在包含 html 的字符串中。所以正则表达式是唯一的办法。

<head>
<title>Html</title>
</head>

得到这样的东西：

<head>
<title>Html</title>
<script src="some_path.js"></script>
</head>

还有更多：

<head>
<title>Html</title>
<script src="some_path.js"></script>
<script src="some_path_2.js"></script>
</head>

【问题讨论】：

<head> 是一个标签，就像页面中的任何其他标签一样......不需要正则表达式。您可以附加到它
既然这不是 DOM 解析而是字符串解析，那么如何避免使用正则表达式，而是解析出字符串呢？一个简单的分词器会创造奇迹。
您无法访问 DOM 的上下文是什么？
迄今为止最好的解决方案。 var wholeHtml = ""; wholeHtml.replace(/()()/g, '$1
@AntonAleksandrovichTrofimenk - 这真的不是最好的解决方案，它依赖于在其他标签之后立即存在一个元标签，它正在替换完全不必要的整个反向引用。我会看看迈克尔的解决方案

标签： javascript html

【解决方案1】：

这是可能的。只需获取 <head> 元素并像往常一样向其添加子元素：

document.getElementsByTagName("head")[0].appendChild(whatever);

有关其工作原理的更多信息，您可以在 Google 上搜索“Javascript DOM”。

【讨论】：

根据 OP“不在文档 [DOM] 中，在包含 html 的字符串中。”

【解决方案2】：

使用这个：

function injectScript (id, src, async) {
    var js,
    fjs = document.getElementsByTagName("head")[0];

    if (document.getElementById(id))
        return;

    js = document.createElement("script");
    js.id = id;
    js.src = src;
    js.type = 'text/javascript';

    if (async) {
        js.async = true;
    }

    fjs.appendChild(js, fjs);
}

将防止双重注入并支持异步脚本。

【讨论】：

【解决方案3】：

如果您仅将 HTML 用作字符串而不是 DOM 文档，则可以在 head-close 标记之前进行简单的插入，而无需使用正则表达式。下面的代码使用了拼接方法in this answer。它可以被做成一个函数而不是一个原型，并且为了我们的目的去掉第二个参数：

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

var insertTag = function(newTag, html) {
  var end = html.indexOf('</head>');
  return html.splice(end, 0, newTag);
}

如果你有

var doc = '<head><title>Html</title></head>';

然后你跑了

var doc = insertTag('<script src="some_path.js"></script>', doc);

你会得到

<head><title>Html</title><script src="some_path.js"></script></head>

该功能很简单，不会检查是否存在 head-close 标签，或任何其他可能需要考虑的安全问题。它会带有换行符，并且只是作为如何避免 DOM（每个问题）和正则表达式（每个保存你的理智）的一般概念。

但是，如果您有可用的 DOM，请使用它。

【讨论】：

鉴于问题的范围非常有限以及不使用 DOM 的（可怕的）要求，这可能是最简单的方法。
我什至可以使用“哑”这个词而不是简单。但它确实有效。对于术语“工作”的某些有限定义。

【解决方案4】：

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'some_path.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

【讨论】：

【解决方案5】：

如果你想把页面的名字放到标题头，你可以在标题标签前使用window.onload，它会搜索选择器插入到。

在此示例中，我们正在页面中搜索 H3 标记。（可以是 h2、h1...）

<!doctype html>
<html lang="en">
<head>
[other metas]
<script>window.onload = function(){
var h3Text = document.querySelector("h3").innerText;
return document.querySelector("title").innerHTML = h3Text;
}</script>
<title></title>
</head><body><h3>This Will Go Into the Title Tag</h3>....

【讨论】：