给一个元素插入一段HTML

最新推荐文章于 2024-07-31 11:05:25 发布

马优晨

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量4.3k

点赞数

分类专栏：小技巧前端开发文章标签：给一个元素插入一段HTML JS给一个元素插入一段HTML 页面插入一段HTML 插入一段新的HTML 给div增加一段HTM

本文链接：https://blog.csdn.net/qq_24147051/article/details/89096048

版权

前端开发同时被 2 个专栏收录

233 篇文章 27 订阅

订阅专栏

小技巧

133 篇文章 4 订阅

订阅专栏

给一个元素插入一段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>