大家好，我目前正在製作一個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>) }