通過JavaScriptDom動態追加元素

我需要回答的她的問題

練習：1 級問題 1

我試圖動態附加孩子并以緊湊的方式獲得垂直的結果，正如您在轉到鏈接時將在問題輸出中看到的那樣

let hh = document.querySelector('h1')
hh.style.textAlign = 'center'
let hh1 = document.querySelector('h2')
hh1.style.textAlign = 'center'
let hh2 = document.querySelector('h3')
hh2.style.textAlign = 'center'

for (i = 0; i <= 100; i  ) {

  let p1 = document.createElement('div');

  {
    if (i % 2 == 0) {

      p1.className = 'Container'
      p1.style.fontSize = '25px'
      p1.style.backgroundColor = '#91E537'
      p1.textContent = i;
      p1.style.padding = '55px'
      p1.style.margin = '1px'
      p1.style.textAlign = 'center'
      p1.style.width = '20px'
      document.body.appendChild(p1);
    } else {
      p1.className = 'Container'
      p1.style.fontSize = '25px'
      p1.textContent = i;
      p1.style.backgroundColor = '#E5D037'
      p1.style.padding = '55px'
      p1.style.margin = '1px'
      p1.style.textAlign = 'center'
      p1.style.width = '20px'
      document.body.appendChild(p1);
    }
  }
  if (i >= 2) {
    let flag = 0;
    for (j = 2; j <= i / 2; j  ) {
      if (i % j == 0) {
        flag = 1;
        break;
      }
    }
    
    if (flag == 0) {
      p1.className = 'Container'
      p1.style.fontSize = '25px'
      p1.style.backgroundColor = '#E55137'
      p1.textContent = i;
      p1.style.padding = '55px'
      p1.style.margin = '1px'
      p1.style.textAlign = 'center'
      p1.style.width = '20px'
      document.body.appendChild(p1);

    }
  }
}

<h1>Number Generator</h1>
<h2>30 days of JavaScript</h2>
<h3>Author:ABC</h3>
<div class="container"></div>

你可以看到上面的HTML和javascript的代碼！！！幫助我輕松附加資料的代碼，不要使用我需要簡單代碼的框元素。我試圖用一些 HTML 樣式來做，但它沒有幫助我，使用插入相鄰文本也不起作用。嘗試僅對 javascript 代碼進行更改，而不是 HTML，如果可能的話，對 HTML 進行最小更改

我正在使用 HTML5 和 CSS3

uj5u.com熱心網友回復：

與其為所有生成元素添加大量行內樣式屬性，不如將一些簡單的 CSS 應用到父（容器）和子級，然后使用 Javascript 根據給定的奇數/偶數和標準將類分配給元素主要。整個代碼中的注釋應該會有所幫助

// helper function to create basic DOM element with attributes
const node=( type='div', attr={} )=>{
  let n = document.createElement(type);
  Object.keys( attr ).forEach( a=>n.setAttribute( a, attr[a] ) );
  return n;
};

// utility to test if a number is a "Prime Number"
const isprime=( n=0 )=>{
  for( let i = 2; i < n; i   ) {
    if( n % i === 0 ) return false;
  }
  return n > 1;
};

// generate between these numbers
const iStart=1;
const iEnd=100;

// HTML container
const results = document.querySelector('#results');

// iterate through number range and add new DIV for each number
for( let i = iStart; i<=iEnd; i   ) {
  // calculate the className to assign
  let cn=i % 2 === 0 ? 'even' : 'odd';
  if( isprime( i ) ) cn='prime';
  
  // create the DIV
  let div=node( 'div', { 'class':cn, 'data-id':i } );
  
  // append to output container
  results.appendChild( div );
}



// generate Page headers before results / output
let headers={
  h1:'Number Generator',
  h2:'30 days of Javascript',
  h3:'Geronimo Bogtrotter III'
};
// iterate over the keys/properties of the object and create 
// a new header for each using the value assigned within the object.
Object.keys( headers ).forEach( prop=>{
  let n=node( prop );
      n.textContent=headers[ prop ];

  // add the new header before the numbers grid
  document.body.insertBefore( n, results );
});

/*
  Some simple variables to help with layout.
  Change here to modify displayed grid.
*/
:root{
  --width:600px;
  --m:0.25rem;
  --r:0.35rem;
  --wh:calc( calc( var( --width ) / 5 ) - calc( var( --m ) * 4 ) );
}


body{
  font-family:monospace;
  padding:0;
  margin:0;
}
#results {
  width: var(--width);
  min-height: var(--width);
  float: none;
  margin: 1rem auto;
  font-family:fantasy;
}
#results > div {
  width: var( --wh );
  height: var( --wh );
  border: 1px solid black;
  border-radius:var(--r);
  margin: var(--m);
  display: inline-block;
  cursor:pointer;
}


/*
  Use the pseudo element :after to 
  display the number of the square.
  
  This uses the `data-id` attribute
  assigned within Javascript.
*/
#results>div:after {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items:center;
  flex:1;
  margin:auto;
  content: attr(data-id);
  color:black;
  text-shadow:0 0 15px rgba(255,255,255,1);
  height:100px;
}

/*
  modify the display for certain colours
  to aid clarity
*/
#results>div.odd:after{
  text-shadow:0 0 15px rgba(0,0,0,1);
}
#results>div.prime:after{
  text-shadow:0 0 15px rgba(0,0,0,1);
  color:white;
}

/*
  The basic 3 colours to suit the odd/even/prime
  status of each square.
*/
.even {
  background: green;
}
.odd {
  background: yellow
}
.prime {
  background: red
}


h1,h2,h3{
  text-align:center;
}

<div id='results'></div>

uj5u.com熱心網友回復：

這里的想法是為所有塊創建一個容器，并將該容器的顯示樣式屬性設定為 flex，將 style.flewrap 設定為 wrap，您可以使用 style.width 屬性控制每行需要多少塊。
創建此元素后，您需要將動態創建的塊附加到它，如下p2.appendchild(p1);
代碼：

let p2 = document.createElement('div');
p2.className= 'p2';
p2.style.display = 'flex';
p2.style.flexwrap = 'wrap';
p2.style.width = '800px'
for (i = 0; i <= 101; i  ) {
    ...
    for every document.body.append(p1); --> p2.append(p1);
    ...
}
document.body.appendChild(p2);

標籤：javascript html css 循环 dom

上一篇：為什么querySelectorAll沒有選擇我的課程？

下一篇：在我的情況下，如何在PHP中成功修改CSS類的檔案的DOM？