how to write multiple div using javascript dom

Question

I want to write this html code (containing many div and each div have different class) by using javascipt Dom

<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>

check my try but its not working

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);

Andriy · Accepted Answer · 2020-04-01 11:42:07Z

Use classList.add() to add classes
Use a dot (.) when querying elements by class with querySelector()
Change div1.appendChild(div1) to div1.appendChild(div2)

I added some CSS to visualize result.

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>

Pavel Musil · Accepted Answer · 2020-03-31 13:13:53Z

You must use setAttribute method for set class and fix your div1.appendChild(div1); code:

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);

Collectives™ on Stack Overflow

how to write multiple div using javascript dom

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related