使用 jquery 创建的 html 不显示 [重复]答案

【问题标题】：html created with jquery does not show [duplicate]使用 jquery 创建的 html 不显示 [重复]
【发布时间】：2015-07-07 11:04:42
【问题描述】：

我有一个部分使用 javascript/jQuery 创建的 HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>with-js</title>
    <script type="text/javascript" src="./scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="./scripts/object.js"></script> 
  </head>
  <body>
    <div id="depiction"></div>
  </body>
</html>

以下脚本 object.js 创建额外的 HTML 元素：

jQuery(document).ready(function() {
   var svg = jQuery('<svg height="466" width="1842" ></svg>');
   var g = jQuery('<g transform="translate(400 200)"></g>');
   var t = jQuery('<text text-anchor="middle" x="20" y="26">r1</text>');
   var r = jQuery('<rect class="svg_elem" id="elem_1" width="41px" height="40px"></rect>');
   g.append(t).append(r).appendTo(svg);
   svg.appendTo(jQuery('#depiction'));
});

当我在浏览器中加载 HTML 文件时，<g> 元素不可见。但是，我可以使用检查器工具恢复完整的 HTML 代码并将其粘贴到另一个文件中，删除对 JS 脚本的引用：

<!DOCTYPE html>
<html>
  <head>
    <title>without-js</title>
  </head>
  <body>
    <div id="depiction">
      <svg width="1842" height="466">
        <g transform="translate(400 200)">
          <text y="26" x="20" text-anchor="middle">r1</text>
          <rect id="elem_1" class="svg_elem" height="40px" width="41px"></rect>
        </g>
      </svg>
    </div>
  </body>
</html>

现在，在浏览器中加载新的 HTML 文件时，<g> 元素会正确显示！

谁能给我解释一下？

提前致谢

【问题讨论】：

试试 ** $('#depiction').append(g.append(t).append(r).appendTo(svg)) ** ;
@Ted - 唯一有效的原因是 <svg> 元素从未附加
OP 的代码完全符合它的预期？
谢谢巴拉，但<rect> 元素仍然没有出现； HTML 检查器说这是一个 0x19 矩形，而不是 41x40 矩形。
我的意思是你的代码（OP = 原始海报）。它做了它应该做的事情，它附加了元素，但它们是不可见的，你可以在重复的问题中阅读原因。

标签： javascript jquery

【解决方案1】：

jQuery 使用 createElement() 函数创建元素，但对于 SVG，您需要使用 createElementNS()。

解决方案：

简单的方法： 使用 d3.js 库代替 jQuery；

对黑客友好的方式：重写部分jQuery代码：

// line 526 in jquery-X.X.X.js, in my case it is jquery-1.9.1.js   
// Single tag
if ( parsed ) {
    // ----------------------------------------------------
    var xml_html_element;
    if ( parsed[1] == "svg" || parsed[1] == "path" ) {
        xml_html_element = context.createElementNS( "http://www.w3.org/2000/svg", parsed[1] );
    } else {
        xml_html_element = context.createElement( parsed[1] );
    }
    return [xml_html_element];
    // ----------------------------------------------------
    //return [ context.createElement( parsed[1] ) ];

}

现在，你可以像这样使用 jQuery：

var $svg = $("<svg>").attr({'version': "1.1"});
var $path = $("<path>").attr({
    'd': 'M' + 10 + ',' + 100 + ' C' + 200 + ',' + 150 + ' ' + 200 + ',' + 170 + ' ' + 300 + ',' + 250,
    'fill': "none",
    'stroke': "rgba(100,100,100,0.9)",
    'stroke-width': "1"
});
var $body = $("body");
$body.append($svg.append($path));

当然，为了您的个人需要，您应该在此 hack 中扩展 SVG 标签的数量（第 530 行）：

if ( parsed[1] == "svg" 
     || parsed[1] == "g" 
     || parsed[1] == "path" 
     || parsed[1] == "line") {
 ...
}

【讨论】：

我认为@adeneo 是对的：在问题jquery's append not working with svg element? 中。用户 Timo 声称包含$("body").html($("body").html()); 可以解决问题。初步测试证实了这一说法。