SVG路径点击后更新已有DIV内容而非新增DIV的实现疑问

我实现了点击SVG中的path元素创建DIV的功能，但每次点击不同path时都会新增一个DIV，而非更新已创建DIV内的信息。希望能改成点击新path时直接更新DIV内的信息，或者退一步关闭旧DIV再创建新的。

原JavaScript代码 #

var fakeObject = {"One": {"givenName": "Joshua"}, "Two": {"givenName": "James"}}

console.log(fakeObject)

$("path").on("click", function(e){
    var pathID = e.target.id.split('_');
    console.log(pathID)
    createDiv(pathID[1]);
});

function createDiv(value){
    $("#DOM").append(`
    <div>
        <p>${fakeObject[value].givenName}</p>
    </div>
  `)
}

原HTML代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path id ="Path_One" d="M10,60 L50,10 90,60" />
  <path id="Path_Two" d="M20,30 L10,130 20,30" />
</svg>
<div id="DOM">
  <p>
    This is a test div
  </p>
</div>

方案一：直接更新已有内容（推荐） #

这种方式不需要重复创建DIV，只更新内容，效率更高。有两种实现方式：

方式1：保留原有内容，更新新增的展示容器 #

适合需要保留#DOM里原有测试文本的场景：

var fakeObject = {"One": {"givenName": "Joshua"}, "Two": {"givenName": "James"}}

$("path").on("click", function(e){
    var pathID = e.target.id.split('_');
    updateDivContent(pathID[1]);
});

function updateDivContent(value){
    // 检查是否存在用于展示的容器，不存在则创建
    var contentContainer = $("#DOM .name-container");
    if (contentContainer.length === 0) {
        $("#DOM").append('<div class="name-container"><p></p></div>');
        contentContainer = $("#DOM .name-container");
    }
    // 更新内容
    contentContainer.find("p").text(fakeObject[value].givenName);
}

方式2：直接替换#DOM的全部内容 #

如果不需要保留原有测试文本，可以直接用html()方法替换整个容器内容：

var fakeObject = {"One": {"givenName": "Joshua"}, "Two": {"givenName": "James"}}

$("path").on("click", function(e){
    var pathID = e.target.id.split('_');
    // 直接替换#DOM内的所有内容
    $("#DOM").html(`<div><p>${fakeObject[pathID[1]].givenName}</p></div>`);
});

方案二：清空旧DIV后创建新的 #

如果需要先清空原有内容再创建新DIV，只需修改createDiv函数，先调用empty()清空容器再添加新元素：

var fakeObject = {"One": {"givenName": "Joshua"}, "Two": {"givenName": "James"}}

$("path").on("click", function(e){
    var pathID = e.target.id.split('_');
    createDiv(pathID[1]);
});

function createDiv(value){
    // 先清空容器内容，再添加新DIV
    $("#DOM").empty().append(`
    <div>
        <p>${fakeObject[value].givenName}</p>
    </div>
  `)
}

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