html & lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& lttitle & gt自動向現有標簽添加內容
& ltstyle & gt
/*樣式設置*/
。輸入容器{
margin-bottom:10px；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv class="input-container " >
& ltInput type = " text " ID = " Input content " placeholder = " Enter new content " >
& ltbutton onclick = " add content()" & gt；過渡預覽
& lt/div & gt；
& ltul & gt
& lt李& gt& ltspan & gt原創內容
& lt李& gt& ltspan & gt原創內容2
& lt！-更多李牌...-& gt；
& lt/ul & gt；
& lt腳本& gt
函數addContent() {
//獲取輸入框的內容
var input content = document . getelementbyid(" input content ")。價值；
//獲取所有li標簽和對應的span標簽。
var listItems = document . getelementsbytagname(" Li ")；
for(var I = 0；我& ltlistItems.lengthi++) {
var spanElement = listItems[i]。getElementsByTagName(" span ")[0]；
//用原始內容替換輸入內容。
span element . innerhtml = input content；
}
}
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；
在上面的代碼中，我們首先定義了壹個輸入框和壹個按鈕來接收用戶輸入的新內容以及觸發按鈕的click事件。然後，我們通過JavaScript寫了壹個名為addContent()的函數，當按鈕被點擊時就會被調用。在函數內部，我們獲取輸入框的內容並遍歷所有