如何使用javascript dom编写多个div

Question

我想使用javascipt Dom编写这个html代码（包含许多div并且每个div有不同的类）

<div class="row">

        <div class="col s12 m6">

            <div class="card blue-grey darken-1">

                <div class="card-content white-text">

                    <span class="card-title">Card Title</span>

                    <p>I am a very simple card. I am good at containing small effectively.</p>

                </div>

            </div>

        </div>

    </div>

检查我的尝试，但它不起作用

var row1 = document.querySelector('row');

var div1 = document.createElement('div');

div1.className('col s12 m6');

var div2 = document.createElement('div');

div2.className('card blue-grey darken-1');

var div3 = document.createElement('div');

div3.className('card-content white-text');

var span1 = document.createElement('span');

span1.className('card-title');

var para = document.createElement('p');

var paracontent = document.createTextNode('this is new world');

para.appendChild(paracontent);

div3.appendChild(para);

div2.appendChild(div3);

div1.appendChild(div1);

row1.appendChild(div1);

Answer 1

使用classList.add()添加类按类查询元素时使用点 (.)querySelector()更改div1.appendChild(div1)为div1.appendChild(div2)我添加了一些 CSS 来可视化结果。var row1 = document.querySelector('.row');var div1 = document.createElement('div');div1.classList.add('col', 's12', 'm6');var div2 = document.createElement('div');div2.classList.add('card', 'blue-grey', 'darken-1');var div3 = document.createElement('div');div3.classList.add('card-content', 'white-text');var span1 = document.createElement('span');span1.classList.add('card-title');span1.textContent = 'Card Title';var para = document.createElement('p');var paracontent = document.createTextNode('this is new world');para.appendChild(paracontent);div3.appendChild(span1);div3.appendChild(para);div2.appendChild(div3);div1.appendChild(div2);row1.appendChild(div1);.row {  background: red;  padding: 0 15px 15px;}.row::before {  content: 'class="row"';  color: white;}.col {  background: white;  padding: 0 15px 15px;}.col::before {  content: 'class="col s12 m6"';  color: white;  color: red;}.blue-grey {  background: blue;  padding: 0 15px 15px;}.blue-grey::before {  content: 'class="card blue-grey darken-1"';  color: white;}.white-text {  background: green;  padding: 15px;  color: white;}.card-title {  font-weight: bold;  padding: 5px;  background: white;  color: green;  display: block;}<div class="row"></div>

Answer 2

您必须使用setAttribute方法来设置class和修复您的div1.appendChild(div1);代码：var row1 = document.querySelector('.row');var div1 = document.createElement('div');div1.setAttribute("class", 'col s12 m6');var div2 = document.createElement('div');div2.setAttribute("class", 'card blue-grey darken-1');var div3 = document.createElement('div');div3.setAttribute("class", 'card-content white-text');var span1 = document.createElement('span');span1.setAttribute("class", 'card-title');var para = document.createElement('p');var paracontent = document.createTextNode('this is new world');para.appendChild(paracontent);div3.appendChild(para);div2.appendChild(div3);div1.appendChild(div2);row1.appendChild(div1);