Fatal编程技术网
  • javascript/
  • Javascript 在标题标记内插入脚本和链接标记

Javascript 在标题标记内插入脚本和链接标记

javascript dom

Javascript 在标题标记内插入脚本和链接标记,javascript,dom,Javascript,Dom,在加载页面时，是否可以仅使用Javascript或DOM（不是JQuery）在中插入/生成和标记，或者只在中包含一个标记，然后从那里开始？如果我们已经在中添加了一个类似的或，我们仍然可以调试它并避免重复 例如： 以前 <Header> <script src="Scripts/Generate.js" type="text/javascript"></script> </Header> 之后 任何建议或答案都会对我有所帮助。HTML

在加载页面时，是否可以仅使用Javascript或DOM（不是JQuery）在
中插入/生成
和
标记，或者只在
中包含一个
标记，然后从那里开始？如果我们已经在
中添加了一个类似的
或
，我们仍然可以调试它并避免重复

例如：

以前

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
</Header>
之后
任何建议或答案都会对我有所帮助。

HTML:

<head>
    <script src="Scripts/Generate.js"></script>
</head>
之后，HTML是：

 <head>
    <script src="Scripts/Generate.js"></script>
    <script id="id1" src="Scripts/Script1.js"></script>
    <link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>
我假设“复制”意味着具有相同的src属性值。请注意，这只会阻止脚本添加副本，因此必须在添加所有其他脚本后运行：

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var elements = document.getElementsByTagName(tagName);
  var propToCheck = {script:'src', link: 'href'}[tagName];

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // If find a "matching" element, do nothing
    if (elements[i][propToCheck].indexOf(src) != -1) {
      return;
    }
  }

  // Otherwise, add an element of the required type
  var element = document.createElement(tagName);
  element[propToCheck] = src;
  document.getElementsByTagName('head')[0].appendChild(element);
}

conditionallyAddBySource('script', 'myJSLib.js');
提供的querySelector支持是可用的（即标准模式下的8和更高版本，不知道其他模式）。

最简单的方法如下：

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';

>document.head.innerHTML+=''；
这适用于对吗？有没有可能把它放在一个外部js文件上，然后在那里完成其余的工作？（1）有。（2） 取决于“it”的含义。如果可用，
document.querySelector
会更好。代码越少，速度越快，可读性越强。主要是第一个和最后一个原因
document.querySelector（'script[src=“Scripts/Script1.js”]”）
Ah，这很有意义。 
function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var elements = document.getElementsByTagName(tagName);
  var propToCheck = {script:'src', link: 'href'}[tagName];

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // If find a "matching" element, do nothing
    if (elements[i][propToCheck].indexOf(src) != -1) {
      return;
    }
  }

  // Otherwise, add an element of the required type
  var element = document.createElement(tagName);
  element[propToCheck] = src;
  document.getElementsByTagName('head')[0].appendChild(element);
}

conditionallyAddBySource('script', 'myJSLib.js');

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var propToCheck = {script:'src', link: 'href'}[tagName];
  var element = document.querySelector(tagName + '[' + propToCheck + '$="' + src + '"]');

  if (!element) {
    element = document.createElement(tagName);
    element[propToCheck] = src;
    document.getElementsByTagName('head')[0].appendChild(element);
  }
}

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';