避免jQuery追加结束标签

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 上均可使用： 在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元素 （又称自动关闭元素）与其他元素之间存在实质性差异，因为它们不能接受后代节点。 polyline就是这样的void元素。 检查器可能会显示它具有结束标记，但是它不应该接受诸如–如果您尝试在其开始标记和结束标记之间插入内容，而该内容很可能会在DOM中插入。