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/>";

OR

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的角度来看，在节点上没有任何属性指定＆＃34;自动关闭＆＃34;。因此，如果您考虑一下，这只能在将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，我敢打赌你正在使用一些功能或属性提及＆＃34; html＆＃34;查看您的施工来源。我发现无论我如何构建我的SVG（具有正确的命名空间），如果我使用.innerHTML （或jQuery＆＃39; s .html()基本相同）结果将是正确的结束标记。这是因为您要求浏览器将其呈现为HTML，因此您会遇到同样的问题。

我已经确认了上述内容，甚至使用D3来设置结构。

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

您需要的是.innerSVG或类似的东西。

但总的问题应该是 - 你究竟想做什么。如果要构建正确导出SVG Source的东西，那么可能需要这样做 - 但我不能想到另一个原因。关闭或自动关闭对标记本身的行为没有任何影响。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何用jQuery追加自封闭标签？

3 个答案: