使用 Internet Explorer 生成动态 SVG答案

【问题标题】：Generating dynamic SVG with Internet Explorer使用 Internet Explorer 生成动态 SVG
【发布时间】：2018-06-14 18:05:05
【问题描述】：

你能告诉我为什么我的代码不能在 Internet Explorer（Edge 和 11）中运行吗？我想用 javascript 添加到 svg 元素子元素。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>

<svg id="planer-canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">

</svg>

<script>
    const NS = 'http://www.w3.org/2000/svg';
    var planer = document.getElementById('planer-canvas');

    var elem = document.createElementNS(NS, "circle");
    elem.setAttributeNS(null, "cx", 10);
    elem.setAttributeNS(null, "cy", 10);
    elem.setAttributeNS(null, "r", 10);
    elem.setAttributeNS(null, "stroke", "black");
    elem.setAttributeNS(null, "stroke-width", 2);
    elem.setAttributeNS(null, "fill", "yellow");
    elem.setAttributeNS(null, "id", "close-circle");

    planer.append(elem);
</script>
</body>

</html>

它适用于 Chrome 和 Firefox，因此 IE 会抛出错误：

SCRIPT438: Object doesn't support property or method 'append'

有人遇到过类似的问题吗？能给我解惑吗？

这里是代码笔： https://codepen.io/anon/pen/ppWwBg#anon-login

我做错了什么？

【问题讨论】：

标签： javascript internet-explorer svg

【解决方案1】：

Internet Explorer 或 Edge 不支持append：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

改为：

planer.appendChild(elem);

…，所有浏览器都支持。

【讨论】：