JavaScript动态添加表格按钮：解决ID重复与元素显示异常

我来帮你解决这两个问题，其实都是字符串处理和DOM操作的小细节问题~

问题1：innerHTML拼接唯一ID失败 #

你之前的字符串拼接写法有误，导致object.capital没有被正确解析成变量值。这里推荐两种修正方式：

方案A：使用ES6模板字符串（最简洁）

用反引号`包裹整个HTML字符串，变量直接用${}插入，语法清晰不易出错：

cell6.innerHTML = `<input id="${object.capital}" onclick="Ja()" type="submit" value="Wijzig">`;

方案B：传统字符串拼接（兼容旧环境）

注意引号的嵌套规则，把变量用+连接到字符串中：

cell6.innerHTML = '<input id="' + object.capital + '" onclick="Ja()" type="submit" value="Wijzig">';

小提示：如果object.capital包含空格或特殊字符，建议先做ID规范化处理，比如：

const safeId = object.capital.replace(/\s+/g, '-'); // 把空格替换成短横线
cell6.innerHTML = `<input id="${safeId}" onclick="Ja()" type="submit" value="Wijzig">`;

问题2：createElement按钮显示[object HTMLInputElement] #

你创建了正确的DOM按钮元素，但错误地用innerHTML赋值——这会把DOM对象强制转换成字符串，所以显示出了对象的默认字符串表示。正确的做法是用DOM方法把按钮添加到单元格中：

// 替换原来的 cell6.innerHTML = x;
cell6.appendChild(x);

如果想更灵活，还可以直接用JS绑定点击事件（比HTML里写onclick更符合现代开发规范）：

x.addEventListener('click', Ja);
// 如果需要给Ja函数传递参数，用箭头函数包裹：
x.addEventListener('click', () => Ja(object.capital));

修改后的完整代码示例（createElement版本） #

function loadCountries() {
 fetch("restservices/countries")
 .then(response => response.json())
 .then(function(myJson) {
 var tabel = document.getElementById("mijnTabel");
 for (const object of myJson) {
 var rij = tabel.insertRow(1);
 rij.addEventListener("click", function() {
 showWeather(object.latitude, object.longitude, object.capital);
 });
 // 创建Wijzig按钮
 var wijzigBtn = document.createElement("INPUT");
 wijzigBtn.setAttribute("type", "button");
 wijzigBtn.setAttribute("value", "Wijzig");
 wijzigBtn.setAttribute("id", object.capital);
 wijzigBtn.addEventListener('click', Ja); // 绑定点击事件

 // 创建Verwijder按钮
 var verwijderBtn = document.createElement("INPUT");
 verwijderBtn.setAttribute("type", "button");
 verwijderBtn.setAttribute("value", "Verwijder");
 verwijderBtn.setAttribute("id", `verwijder-${object.capital}`); // 给删除按钮设置唯一ID
 verwijderBtn.addEventListener('click', Nee);

 var cell1 = rij.insertCell(0);
 var cell2 = rij.insertCell(1);
 var cell3 = rij.insertCell(2);
 var cell4 = rij.insertCell(3);
 var cell5 = rij.insertCell(4);
 var cell6 = rij.insertCell(5);
 var cell7 = rij.insertCell(6);
 cell1.innerHTML = object.name;
 cell2.innerHTML = object.capital;
 cell3.innerHTML = object.region;
 cell4.innerHTML = object.surface;
 cell5.innerHTML = object.population;
 cell6.appendChild(wijzigBtn); // 添加Wijzig按钮到单元格
 cell7.appendChild(verwijderBtn); // 添加Verwijder按钮到单元格
 }
 });
}

两种方法都能解决你的问题：模板字符串写法更简洁，适合快速生成静态HTML；createElement方式更灵活，便于后续动态修改元素属性或事件。

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