如何通过JavaScript将SVG添加为DIV的子元素？

要把ID为BarChart的SVG元素添加到ID为info的DIV中，让DIV同时保留原有段落内容和SVG图表，以下是几种实用的JavaScript实现方式：

方法一：添加到DIV内容末尾 #

使用appendChild方法，将SVG移动到DIV的最后位置，原有内容会保留在SVG前方：

// 获取目标元素
const infoContainer = document.getElementById('info');
const barChart = document.getElementById('BarChart');

// 移动SVG到DIV中
infoContainer.appendChild(barChart);

方法二：添加到DIV内容开头 #

如果需要把SVG放在DIV原有内容的前面，可以用insertBefore：

const infoContainer = document.getElementById('info');
const barChart = document.getElementById('BarChart');

// 插入到DIV第一个子元素之前，DIV为空时直接添加
infoContainer.insertBefore(barChart, infoContainer.firstChild);

方法三：现代浏览器简洁写法 #

现代浏览器支持prepend方法，实现和方法二相同的效果，代码更简洁：

const infoContainer = document.getElementById('info');
const barChart = document.getElementById('BarChart');

// 直接添加到DIV开头
infoContainer.prepend(barChart);

注意事项 #

• 上述方法都是移动原SVG元素，而非复制。如果需要复制SVG再添加，可先创建副本：

  const svgCopy = document.getElementById('BarChart').cloneNode(true);
  document.getElementById('info').appendChild(svgCopy);
  

• 确保代码在DOM完全加载后执行，可将脚本放在</body>标签前，或者用DOM加载事件包裹：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里放上述移动/复制代码
  });
  

内容的提问来源于stack exchange，提问作者Fateme Nazari