如何使用 jQuery 添加自封闭标签？

Question

我想知道如何创建和添加一个自封闭的元素，例如

<img src="" />

标签或我想要的 SVG 元素中的

<circle cx="" cy"" />

。

更新

当我使用以下方法时，它会自动用

</circle>

而不是

/>

关闭它。

$('svg').append('<circle>');
$('svg').append('<circle/>');
$('svg').append('<circle />');
$('svg').append('<circle cx="" cy="" />');

下面的所有代码片段将创建以下结果：

<circle></circle>

接下来我可以尝试什么？

Answer 1

在 jquery 中创建的任何类型的元素都是相同的，但是你说它会自动附加结束标记，这可能是无效的..使用如下 -

$('svg').append('<circle><circle/>');

自动关闭

$('svg').append('<circle cx="" cy="" />');

或附加简单的最佳方式 -

var html ="";
html +="<circle>";
//you in between codes ;
html +="<circle/>";

或

var html ="";
html +="<circle cx='"+300+"' cy='"+300+"' />";

终于

$('svg').append(html);
$('body').html($('body').html()); // A trick to refresh to overcome issues

Answer 2

自关闭性质是由命名空间定义的，因此它将在很大程度上取决于您如何查看代码的输出。从 Dom 的角度来看，节点上没有任何属性指定“自动关闭”。所以如果你想一想，这只能在将 Dom 渲染为字符串输出时应用，并且必须由渲染器决定。

如果您使用现代浏览器的检查器查看 SVG 元素（具有正确的命名空间），您将看到圆圈项目显示为自动关闭。然而，使用相同的设置（但命名空间不正确）——您的 SVG 不仅不会渲染——您会看到检查器将其视为 HTML。在 HTML 中，没有

circle

的规范，因此它只会回退到默认值。这是正确关闭的。

正确的命名空间

var body = jQuery('body'),
    svg = jQuery(document.createElementNS('http://www.w3.org/2000/svg', 'svg')),
    cir = jQuery(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
    cir.attr({cx: 30, cy: 30, r: 20, style: 'fill: red;'});
svg.attr({
  viewBox: "0 0 120 120",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg"
});
svg.appendTo(body);
svg.append(cir);

命名空间不正确

var body = jQuery('body'),
    svg = jQuery('<svg>'),
    cir = jQuery('<circle>');
    cir.attr({cx: 30, cy: 30, r: 20, style: 'fill: red;'});
svg.attr({
  viewBox: "0 0 120 120",
  version: "1.1"
});
svg.appendTo(body);
svg.append(cir);

不管你如何设置你的Dom，我敢打赌你正在使用一些提到“html”的函数或属性来查看你的构造的源代码。我发现，无论我构建 SVG 的效果如何（使用正确的命名空间），如果我使用

.innerHTML

（或 jQuery 的

.html()

，基本相同），结果将具有正确的结束标记。那是因为您要求浏览器将其呈现为 HTML，所以您会遇到同样的问题。

即使使用D3建立结构我也确认了上述情况。

console.log(svg.get(0).innerHTML); // <circle></circle>

您需要的是

.innerSVG

或类似的东西。

然而，总体问题应该是——你实际上想做什么。如果要构建正确导出 SVG Source 的东西，那么这可能是理想的 - 但我想不出其他原因。关闭或自动关闭对标记本身的行为没有影响。

Answer 3

要在自关闭中添加变量，请尝试此操作。

var image_src = "https://i.imgur.com/nzWpgJ1.jpg"
$(".js-preview").html($('<img />', {src: image_src}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-preview"></div>