为数组中的每个对象添加一个< div>

dced5bon  于 2021-07-26  发布在  Java
关注(0)|答案(2)|浏览(342)

如果我这样做了 sql.prepare("SELECT * FROM DB where VALUE >= ?").get(value) 它将返回一个大于或等于值的行数组。如何制作并添加新的 <div> 数组中的部分作为文本的容器?

wh6knrhe

wh6knrhe1#

可能是这样的:

const array = ['it', 'is', 'for', 'example'];
const newDiv = document.createElement('div');
newDiv.innerHTML = 'Text at newly created div'
newDiv.innerHTML += '<br>' + array.join('<br>');
document.body.prepend(newDiv);
div {
    margin: 8px;
    padding: 4px;
    border: 1px dashed black;
}
<html>
    <head></head>
    <body>
      <h1>Some h1 text</h1>
      Some text in the body.
    </body>
</html>
8ftvxx2r

8ftvxx2r2#

这个问题还不清楚,但如果你想返回一组对象,你可以这样做:

const data = [
  { column1: 'bar1', column2: 'bar2', column3: 'bar3'},
  { column1: 'foo1', column2: 'foo2', column3: 'foo3'},
  { column1: 'rab1', column2: 'rab2', column3: 'rab3'}
];
const templateRow = (dataEntry) => `<div class="row">${dataEntry.column1} | ${dataEntry.column2} (${dataEntry.column3})</div>`;

const setup = () => {
  const body = document.querySelector('body');

  const div = document.createElement('div');
  div.classList.add('table');
  data.forEach(dataEntry => createRow(div, dataEntry));

  body.appendChild(div);
}

const createRow = (target, data) => {
  const html = templateRow(data);
  target.insertAdjacentHTML('beforeend', html);

}

window.addEventListener('load', setup);
body {
  font-family: verdana;
}

相关问题