javascript - 如何使用jquery动态附加带有大写字母的html标签？

Question

我渲染了一个 SVG 元素，我需要插入到元素中。但是当我使用 jquery append() 时，它会用小写字母创建。我试图在没有 createElement() 的情况下将 html 写入 append()，但我得到了相同的结果。如何正确插入？

var fe = document.createElement( "foreignObject" );
$('#edge2').append(fe);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437pt" height="206pt" viewBox="0 0 716 270.656" style="width: 100%; max-height: 400px; margin: 20px 0px; border: 2px solid rgb(204, 204, 204);">
  <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 202)">
  <title>G</title>
  <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-202 432.7138,-202 432.7138,4 -4,4"> </polygon>
  <!-- мария -->
  <g id="node1" class="node">
  <title>мария</title>
  <ellipse fill="none" stroke="#0000ff" cx="363.7636" cy="-99" rx="64.9006" ry="18"></ellipse>
  <text text-anchor="middle" x="363.7636" y="-94.8" font-family="Times,serif" font-size="14.00" fill="#0000ff">мария</text>
  <foreignobject></foreignobject></g>
  <!-- павел -->
  <g id="node2" class="node">
  <title>павел</title>
  <ellipse fill="none" stroke="#0000ff" cx="81.0494" cy="-180" rx="78.1868" ry="18"></ellipse>
  <text text-anchor="middle" x="81.0494" y="-175.8" font-family="Times,serif" font-size="14.00" fill="#0000ff">павел</text>
  </g>
  <!-- павел&#45;&gt;мария -->
  <g id="edge1" class="edge">
  <title>павел-&gt;мария</title>
  <path fill="none" stroke="#000000" d="M145.8761,-169.7371C185.4353,-162.5704 236.7111,-151.654 280.8133,-137 295.0868,-132.2573 310.1838,-125.805 323.5297,-119.5638"></path>
  <polygon fill="#000000" stroke="#000000" points="325.3886,-122.5546 332.9013,-115.084 322.3696,-116.239 325.3886,-122.5546"></polygon>
  <text text-anchor="middle" x="230.456" y="-166.2" font-family="Times,serif" font-size="14.00" fill="#000000">сын</text>
  </g>
  <!-- иван -->
  <g id="node3" class="node">
  <title>иван</title>
  <ellipse fill="none" stroke="#0000ff" cx="81.0494" cy="-126" rx="69.5582" ry="18"></ellipse>
  <text text-anchor="middle" x="81.0494" y="-121.8" font-family="Times,serif" font-size="14.00" fill="#0000ff">иван</text>
  </g>
  <!-- иван&#45;&gt;мария -->
  <g id="edge2" class="edge">
  <title>иван-&gt;мария</title>
  <path fill="none" stroke="#000000" d="M146.6203,-119.7378C190.0522,-115.5899 247.0358,-110.1478 291.7306,-105.8794"></path>
  <polygon fill="#000000" stroke="#000000" points="292.3172,-109.3393 301.9392,-104.9044 291.6517,-102.371 292.3172,-109.3393"></polygon>
  <text text-anchor="middle" x="230.456" y="-120.2" font-family="Times,serif" font-size="14.00" fill="#000000">муж</text>
  </g>
  </g>
</svg>

标签： javascriptjquery