我想使用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);
2 回答
慕神8447489
TA貢獻1780條經驗 獲得超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>
Helenr
TA貢獻1780條經驗 獲得超4個贊
您必須使用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);
- 2 回答
- 0 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消