不带.innerHTML的html中的JavaScript数组内容

我不熟悉JavaScript和web开发。我试图用html显示一些JavaScript数组的内容。根据我所读的，使用

.innerHTML

销毁所有子元素

我从REST API查询了2个javascript数组：

var humid=[10, 20, 30, 40];
var temp=[50, 60, 70, 80];

如何在html中显示文本，每行显示：

温度10度，湿度50%

温度20度，湿度60%

。。。等等

我是否仍应使用

.innerHTML

？如果是这样的话，除了输出的最后一行之外，它不会全部销毁吗？正在将输出添加到

元素中，但没有列表或表格。

var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
var container=document.querySelector（'.container'）；
对于（var i=0；i
var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
var container=document.querySelector（'.container'）；
对于（var i=0；i有几种方法。首先，您可以将appendChild与createTextNode方法一起使用。或者您可以使用innerHTML/innerText。是的，您是对的，它们会覆盖所有先前保存的内容，但是……您可以使用旧内容、追加新内容并使用innerHTML/innerText设置此组合内容；）

var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
document.getElementById（'output'）。innerHTML=document.getElementById（'output'）。innerHTML+'温度为'+湿度[0]+'度，湿度为'+温度[0]+'%
'；
//较短：
document.getElementById（'output'）。innerHTML+='温度为'+湿度[0]+'度，湿度为'+温度[0]+'%
'；

如果要附加全部：

var humid=[10, 20, 30, 40];
var temp=[50, 60, 70, 80];

for(i=0;i<humid.length;i++)
  document.getElementById('output').innerHTML += 'Temperature was '+humid[i]+' degrees and humidity was '+temp[i]+'%<br>';

var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
对于（i=0；i有几种方法。首先，您可以将appendChild与createTextNode方法一起使用。或者您可以使用innerHTML/innerText。是的，您是对的，它们会覆盖所有先前保存的内容，但是……您可以使用旧内容、追加新内容并使用innerHTML/innerText设置此组合内容；）

var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
document.getElementById（'output'）。innerHTML=document.getElementById（'output'）。innerHTML+'温度为'+湿度[0]+'度，湿度为'+温度[0]+'%
'；
//较短：
document.getElementById（'output'）。innerHTML+='温度为'+湿度[0]+'度，湿度为'+温度[0]+'%
'；

如果要附加全部：

var humid=[10, 20, 30, 40];
var temp=[50, 60, 70, 80];

for(i=0;i<humid.length;i++)
  document.getElementById('output').innerHTML += 'Temperature was '+humid[i]+' degrees and humidity was '+temp[i]+'%<br>';

var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
对于（i=0；i这是JS实现。在使用jQuery时会变得更容易。如果您需要有关jQuery实现的帮助，请告诉我

HTML

这是JS实现。当使用jQuery时变得更加容易。如果您需要jQuery实现方面的帮助，请告诉我

HTML

使用可以动态创建新的dom元素

我的建议是创建一个表并设置其样式：


var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
变量表=$（''）
.append（$（''）.append（$（''）
.append（$（''，{text:'Temperature was'}））
.append（$（''，{text:'度和湿度'}）））
。附加（$（''）；
潮湿.forEach（函数（ele，idx）{
表.追加（$（''）
.append（$（''，{text:ele}））
.append（$（''，{text:temp[idx]+'%}））；
})
$（document.body）.append（表）；
表格{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
td，th{
边框：1px实心#dddddd；
文本对齐：居中；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
使用可以动态创建新的dom元素

我的建议是创建一个表并设置其样式：


var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
变量表=$（''）
.append（$（''）.append（$（''）
.append（$（''，{text:'Temperature was'}））
.append（$（''，{text:'度和湿度'}）））
。附加（$（''）；
潮湿.forEach（函数（ele，idx）{
表.追加（$（''）
.append（$（''，{text:ele}））
.append（$（''，{text:temp[idx]+'%}））；
})
$（document.body）.append（表）；
表格{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
td，th{
边框：1px实心#dddddd；
文本对齐：居中；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
只需准备变量中的最终html内容，然后将其添加到html中即可


var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
var text=“”；
对于（假设i=0；i`；
}
document.getElementById（'output'）。innerHTML=text
只需准备变量中的最终html内容，然后将其添加到html中即可


var潮湿=[10,20,30,40]；
变量温度=[50,60,70,80]；
var text=“”；
对于（假设i=0；i`；
}
document.getElementById（'output'）。innerHTML=text
有两个答案。您可以使用
innerHTML
，但这意味着您必须通过迭代数组并将不同的输出连接在一起来构建HTML字符串。类似于此ES6示例，它使用

或者，您也可以使用。它有多种方法将HTML添加到现有元素中，其中一种方法是
beforeed

因此，如果您不想迭代并希望一次添加一行HTML：

const main = document.querySelector('#main');

let html = `Temperature was <b>${temp[0]}</b> degrees and humidity was <b>${humid[0]}</b>.`;
main.insertAdjacentHTML('beforeend', html);

let html2 = `Temperature was <b>${temp[0]}</b> degrees and humidity was <b>${humid[0]}</b>.`;
main.insertAdjacentHTML('beforeend', html2);

const main=document.querySelector（'#main'）；
设html=`温度为${temp[0]}度，湿度为${潮湿[0]}。`；
main.insertAdjacentHTML（'beforeed'，
var humid=[10, 20, 30, 40]; var temp=[50, 60, 70, 80];
var container = document.getElementById("container");
humid.forEach((item, index)=> {
   let newElement = document.createElement("p");
   let textNode = document.createTextNode("Temperature was "+temp[index]+" degrees and humidity was "+ item+"%")
   newElement.appendChild(textNode);
   container.appendChild(newElement);
;})

function buildStr(temp, humid) {

  // Iterate over the array creating the string, returning a new array
  // with that string output
  return humid.map((el, i) => {
    return `Temperature was <b>${temp[i]}</b> degrees and humidity was <b>${humid[i]}</b>.`;

  // Joining that array of strings together with an html <br />
  }).join('<br />');
}

const main = document.querySelector('#main');
main.innerHTML = buildStr(temp, humid);

$('#main').html(buildStr(temp, humid));

const main = document.querySelector('#main');

let html = `Temperature was <b>${temp[0]}</b> degrees and humidity was <b>${humid[0]}</b>.`;
main.insertAdjacentHTML('beforeend', html);

let html2 = `Temperature was <b>${temp[0]}</b> degrees and humidity was <b>${humid[0]}</b>.`;
main.insertAdjacentHTML('beforeend', html2);

<script>
$(document).ready(function(){
    var humid = [10, 20, 30, 40];
    var temp = [50, 60, 70, 80];

    $.each(humid, function( index, value ) {
      $("ol").append("<li>Temperature was "+value+" degrees and humidity was "+temp[index]+"%</li>");
    });
});
</script>

<ol>
</ol>