如何选择特定的 HTML 文件，并将元素附加到它的标签答案

【问题标题】：How do I select a particular HTML file, and append elements to it's Tags如何选择特定的 HTML 文件，并将元素附加到它的标签
【发布时间】：2015-09-05 10:11:35
【问题描述】：

我正在编写一个程序来生成 HTML 文件。

方法

1.) 程序将根据用户的输入来确定要生成哪种 HTML 文件（HTML、XHTML 1.1、HTML4 等）。该程序将使用如下内容：

var html5 = require('text!html/html5.html');
var html4 = require('text!html/html4.html');
var xhtml11 = require('text!html/html11.html');

2.) 然后用户将选择库，程序会将这些库附加到所选 HTML 文件上的适当标记中。比如：

-jQuery 1.11.3 已选择

var jQuery1_11_3 = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>"

$('head').append('jQuery1_11_3');

问题：

如何确保“head”是所选 HTML 页面的标记？而不是 DOM 的 HTML？
另外我知道使用 jQuery 有一种更简洁的方法，有什么建议吗？

【问题讨论】：

“问题：我如何确定‘head’是所选 HTML 页面的标签？而不是 DOM 的 HTML？” 不确定这部分的解释的问题正确吗？尝试替换 var jQuery1_11_3 = '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>' 注意字符串开头和结尾的单引号。调用 $('head').append('jQuery1_11_3'); 时，jQuery $ 没有出现加载？
我不明白你的评论，对不起。什么意思？
jQuery 未在$('head').append('jQuery1_11_3'); 中定义？ "<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>" 处的字符串似乎有语法错误；双引号内的双引号，没有内引号被转义？
我假设您希望将其作为节点脚本而不是浏览器端来执行。在这种情况下，请查看诸如cheeriojs 之类的库：github.com/cheeriojs/cheerio。您将能够使用核心 Node 方法创建文件，然后生成可以导出到文件的工作 HTML 结构。看看吧！
@guest271314 我错了错字，我没有输入功能代码，我更喜欢理论/方法代码

标签： javascript jquery html node.js requirejs

【解决方案1】：

注意，jQuery() 在调用 .append() 时未定义

$('head').append('jQuery1_11_3');

字符串在

var jQuery1_11_3 = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>"

似乎有语法错误；双引号内的双引号，没有内引号被转义？

如何确保“head”是所选 HTML 页面的标记？而不是 DOM 的 HTML？

尝试使用document.getElementsByTagName("head")[0] 选择head 元素； document.createElement() 创建 script 元素，将 script src 设置为 "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ，将 script 元素附加到 head 元素；当jQuery 作为window 对象的属性加载时，使用script onload 事件来做事。

<html>
<head>
</head>
<body>
  <script>
    var script = document.createElement("script");
    script.id = "jquery";
    script.onload = function() {
      // utilize `setTimeout` here if `jQuery` not defined at `onload` event
      // setTimeout(function() { 
      console.log(window.jQuery("head").find(this).attr("id"))
      // }, 1000)
    }
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
  </script>
</body>
</html>

【讨论】：