Question

我如何确保这一点：

$('.graph svg').append('<polyline points="' + '3,' +point+ ' 97,' +point+ '"style="fill:none;stroke:#FFFFFF;stroke-width:0.5"/>');

实际上会产生自我结束标记..../>

而不是以</polyline>

结束

由于某些原因，只有前者在iOS上呈现。

Answer 1

根本不会产生任何标签;它导致DOM中的元素。标签是描述元素的文本方式。当您将该字符串提供给jQuery时，它会要求浏览器解析该字符串并在内存中创建元素（对象）。唯一涉及的标签是你给jQuery的标签。

从您的更新（评论）：

...还有另一种方法可以避免使用append方法吗？这是一个拒绝在iOS http://jsfiddle.net/rCfrF/23
上工作的小提琴

在Chrome，Firefox或IE上，这对我不起作用。我不认为你可以添加到这样的SVG元素，我认为jQuery试图创建一个 HTML 元素polyline而不是SVG polyline（它是命名空间的））。

这适用于Chrome，Firefox，IE和我的iPhone 5：Updated version of your fiddle on JSBin（jsFiddle在我的iPhone 5上无法正常工作）

function clickappend() {
    var svg = $("#graph svg")[0];
    var polyline = svg.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'polyline');
    polyline.setAttribute("points", "20,0 20,100");
    polyline.style.fill = "none";
    polyline.style.stroke = "#232323";
    polyline.style.strokeWidth = "0.5";
    svg.appendChild(polyline);
    alert('ran');
}

Answer 2

您可以使用：

$('.graph svg').html($('.graph svg').html() + '<polyline points="' + '3,' +point+ ' 97,' +point+ '"style="fill:none;stroke:#FFFFFF;stroke-width:0.5"/>');

Answer 3

这是检查员的问题。 void elements（又称自闭元素）与其他元素之间存在实质性差异，因为它们不能接受后代节点。 polyline是一个无效元素。检查员可能会将其显示为具有结束标记，但它不应该接受诸如以下方法 - 如果您尝试在其开始和结束标记之间插入内容，那么内容可能会在DOM之后插入。

避免jquery追加结束标记

3 个答案: