JavaScript 動態生成輸入框並賦值：字串拼接陷阱與正確寫法

問題代碼（簡化）

var s = '';
for (var i = 0; i < arr.length; i++) {
    s += '**************************';
}
container.innerHTML = s;
// 後續嘗試 document.getElementById('heighti').value = 5 失敗

三個致命錯誤

1. ID 重複：迴圈中所有 id="heighti" 相同，getElementById 只返回第一個。
2. 字串拼接未插入變量：value="" 為空，且未把 i 或 arr[i] 寫進去。
3. 內聯事件/屬性混淆：id="heighti" 當成字面量，而非 "height" + i。

正確寫法（ES6 模板字串）

const container = document.getElementById('container');
let html = '';
for (let i = 0; i < arr.length; i++) {
    html += `
        

            ${arr[i]}
            
        
    `;
}
container.innerHTML = html;

// 如需後續 JS 操作
const inputs = container.querySelectorAll('input[type="text"]');
inputs.forEach((input, idx) => {
    input.value = arr[idx]; // 或任何計算後的值
});

進階：避免 innerHTML XSS 風險

const fragment = document.createDocumentFragment();
arr.forEach((val, idx) => {
    const wrapper = document.createElement('div');
    const label = document.createElement('span');
    label.textContent = val;
    const input = document.createElement('input');
    input.type = 'text';
    input.id = `height${idx}`;
    input.size = 8;
    input.value = val;
    wrapper.append(label, input);
    fragment.appendChild(wrapper);
});
container.appendChild(fragment);

• createElement + textContent 完全繞過 HTML 解析，**天然防 XSS**。
• DocumentFragment 批量掛載，**單次回流**，效能更好。

總結

動態生成表單元素：**模板字串插值生成唯一 ID + 初始值**，或用 **DOM API 逐個創建**（更安全、高效）。切記：ID 必須唯一，值要在生成時寫入。