避免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中插入。