将语法错误附加到 HTML 元素答案

【问题标题】：Appending Syntax Error to HTML Element将语法错误附加到 HTML 元素
【发布时间】：2014-07-22 14:46:12
【问题描述】：

我正在使用 YQL 和 jQuery.ajax 从另一个网站检索内联 JavaScript 变量。该变量包含一个完整的 base64 编码的 XML 文档。

虽然 AJAX 请求有效，但我不知道如何获取 res.query.results 并将其附加到动态生成的 <script> 元素中。

这是 jQuery：

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql/dj/fsp?format=json",
    type: "GET",
    success: function(res) {
      var sc = $('script');
      $(sc).append(document.createTextNode('var '+$(res.query.results)));
      $('head').append(sc);
    }
});

这是控制台日志告诉我的内容：

任何想法或建议将不胜感激。谢谢大家！

【问题讨论】：

标签： javascript jquery html ajax yql

【解决方案1】：

三件事：

要创建一个脚本元素，你可以使用$('<script>')，而不是$('script')。后者搜索所有script元素。
不需要createTextNode，jQuery 会为你处理。
你对$()的调用做得太过分了：
```
      var sc = $('<script>');
      sc.append(document.createTextNode('var '+res.query.results));
  //  ^ #1 (see below)                         ^ #2
```
1. 你又不想$(sc)了，没意义，已经是jQuery实例了。
2. 您不想解析 res.query.results 到 jQuery 实例中，您想将字符串抓取到 JavaScript 变量中（显然）。

Live example:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<script>
  (function() {
    "use strict";

    display("Doing query...");
    $.ajax({
      url: "http://query.yahooapis.com/v1/public/yql/dj/fsp?format=json",
      type: "GET",
      success: function(res) {
        display("Got result, creating <code>script</code>...");
        var sc = $('<script>');
        sc.append('var '+res.query.results);
        $('head').append(sc);
        display("length of <code>txt</code> global variable: " + window.txt.length);
      }
    });

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

【讨论】：