javascript - 避免 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 的标签。

---

来自您的更新(评论):

...is there another way of doing this that avoids the append method? Here's a fiddle that refuses to work on 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');
}