當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

给一个元素插入一段HTML

發布時間：2023/12/31 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了给一个元素插入一段HTML 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

給一個元素插入一段HTML常見的方式有：
1- 使用insertAdjacentHTML
2- 使用innerHTML

舉個例子：
在頁面添加一個棋盤頁面

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>國際象棋棋盤</title><div id="chess"></div><script type="text/javascript">var str = "<table cellpadding='0' cellspacing='0'>";var off = true;for (i = 1; i <= 8; i++) {str += "<tr>";for (j = 1; j <= 8; j++) {if (off) {off = !off;str += '<td class="td01"></td>';} else {off = !off;str += '<td class="td02"></td>';}}off = !off;str += "</tr>";}str += "</table>";// document.getElementById('chess').insertAdjacentHTML('afterend', str) // 方式一document.getElementById('chess').innerHTML = str; // 方式二</script><style type="text/css">table {border: 1px solid #000;}td {width: 100px;height: 100px;background: #ff0;}.td01 {background: #fff;}.td02 {background: #000;}</style> </head><body> </body></html>

效果如下：

總結

以上是生活随笔為你收集整理的给一个元素插入一段HTML的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

元素
html

上一篇：为项目添加autoprefixer
下一篇： csgo已注册防沉迷怎么解除