我很確定
tabelist.innerHTML = '<option>invalid value</option>'
不是制作一個元素并將其插入另一個元素的最佳方法，但如果不是這種方式，我應該如何做到這一點？
let submit = document.querySelector('input#submit')
let tabelist = document.querySelector('select#tabe')
submit.addEventListener('click', clicar)
function clicar(){
let tabenumber = 1
let number = Number(document.querySelector('input#number').value)
if(number == ''){
tabelist.innerHTML = '<option>invalid value</option>'
}else{
tabelist.innerHTML = ''
for(number*tabenumber; tabenumber <=10; tabenumber ){
tabelist.innerHTML = `<option>${number} x ${tabenumber} = ${number*tabenumber} </option>`
}
}
}
uj5u.com熱心網友回復：
.innerHTML是有效的，但只能作為最后的手段使用，因為它具有以下潛在副作用：
- 清除在現在被替換的元素上設定的事件處理程式
- 由于 HTML 決議器必須決議新內容，因此減慢了頁面的呈現速度
- 通過允許執行惡意腳本可能暴露安全漏洞
另一種方法是使用檔案物件模型來創建、配置和注入元素：
const list = document.querySelector("select");
// Create new element
const option = document.createElement("option");
// Configure new element
option.textContent = "Item 1";
// Inject into existing element
list.appendChild(option);<select>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/523681.html