【前端】设置好CSS样式动态添加元素会按照样式显示

这篇就是简单记录下一个小点:

设置好CSS样式先,然后动态生成元素,元素可以按照CSS样式显示,只要对应到相应的规则即可。


<html>
<head>
  <title>Grid Layout Testtitle>
  <style type="text/css">
    .container {
      display: grid | inline-grid;
    }

    #red {
      color: red;
    }
  style>
head>
<body>
  <div class="container">
    
  div>

  <script type="text/javascript">
    var container = document.getElementsByClassName('container'); // 返回一个数组
    var test = document.createElement('p');
    test.innerHTML = "HELLO WORLD";

    container[0].appendChild(test); // 不能用数组添加子结点,而必须是单个元素
    test.setAttribute('id', 'red');
  script>
body>
html>

这是为后面提前设定好布局,然后动态生成元素做一下铺垫。

END.

你可能感兴趣的:(CSS,JavaScript)