大家好，我目前正在制作一个DIV，当点击SVG的路径时，它会创建一个DIV。我已经将函数工作起来了，但现在遇到的问题是，当我点击另一个路径时，它只是打开一个新的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>
`)
}
我知道我的路径函数在点击路径时总是会触发，所以我不确定如何重写它，以关闭点击新路径时的DIV，但最好的情况是在点击新路径时只更改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>
这是一个测试DIV
</p>
</div>
目前，每当点击SVG上的路径时，它只会添加一个新的DIV，而不是在点击另一个对象时进行更新。我的思路是在点击新路径时关闭DIV，然后打开一个新的DIV，但如果能够使用新信息更新DIV，那就不需要这样做。
嘿 :) 你可以给你的div一个id，然后用length检查它是否存在。如果存在，只需使用.html填充新内容。
function createDiv(value){ if($('#divname').length == 0){ $(document.createElement('div')).attr('id', 'divname') } $('#divname').html(<p>...</p>) }