是否有一种方法可以用javascript改变列表元素中的两个文本

Question

我的问题是，当我在同一个列表元素上使用两个。textcontent方法来改变文本时，它不起作用，但是当我注释if else块时，一切都很顺利。我想要的是在改变文本内容后显示它们，但是当我这样做时，span内容消失了，它有温度。

// those are just selectors i think theres nothing wrong with them
const span1 = document.querySelector('#span1');
const span2 = document.querySelector('#span2');
const span3 = document.querySelector('#span3');
const span4 = document.querySelector('#span4');
const span5 = document.querySelector('#span5');
const list1 = document.querySelector('#l1')
const list2 = document.querySelector('#l2');
const list3 = document.querySelector('#l3');
const list4 = document.querySelector('#l4');
const list5 = document.querySelector('#l5');
// those are just selectors i think theres nothing wrong with them

if ((currentHour + 3) >= 10) {
list1.textContent = "Now";
list2.textContent = `${currentHour + 3}:00`;
list3.textContent = (currentHour + 6) + ':00';
list4.textContent = (currentHour + 9) + ':00';
list5.textContent = (currentHour + 12) + ':00';
} else {
list1.textContent = "Now";
list2.textContent = '0' + (currentHour + 3) + ':00';
list3.textContent = '0' + (currentHour + 6) + ':00';
list4.textContent = '0' + (currentHour + 9) + ':00';
list5.textContent = '0' + (currentHour + 12) + ':00';
}
span1.textContent = data.currentTemp + '°C';
span2.textContent = data.temp3 + '°C';
span3.textContent = data.temp6 + '°C';
span4.textContent = data.temp9 + '°C';
span5.textContent = data.temp12 + '°C';

<ul>
<li id="l1">Now<span id="span1"> </span></li>
<li id="l2">09:00<span id="span2"> </span></li>
<li id="l3">12:00<span id="span3"> </span></li>
<li id="l4">15:00<span id="span4"> </span></li>
<li id="l5">18:00 <span id="span5"> </span></li>
</ul>

Answer 1

你可以使用像这样的东西，温度和时间都有一个跨度。

你显示时间的方式也需要纠正。
如果currentTime为>= 13, time5变为25:00，仍然会出现问题。

let currentHour = 6;
let data = {
"currentTemp": 5,
"temp3": 6,
"temp6": 3,
"temp9": 8,
"temp12": 5,
}
// those are just selectors i think theres nothing wrong with them
const time1 = document.querySelector('#time1');
const time2 = document.querySelector('#time2');
const time3 = document.querySelector('#time3');
const time4 = document.querySelector('#time4');
const time5 = document.querySelector('#time5');
const temperature1 = document.querySelector('#temperature1')
const temperature2 = document.querySelector('#temperature2');
const temperature3 = document.querySelector('#temperature3');
const temperature4 = document.querySelector('#temperature4');
const temperature5 = document.querySelector('#temperature5');
// those are just selectors i think theres nothing wrong with them

time1.textContent = "Now";
if ((currentHour + 3) >= 10) {
time2.textContent = (currentHour + 3) + ':00';
} else {
time2.textContent = '0' + (currentHour + 3) + ':00';
}
if ((currentHour + 6) >= 10) {
time3.textContent = (currentHour + 6) + ':00';
} else {
time3.textContent = '0' + (currentHour + 6) + ':00';
}
if ((currentHour + 9) >= 10) {
time4.textContent = (currentHour + 9) + ':00';
} else {
time4.textContent = '0' + (currentHour + 9) + ':00';
}
if ((currentHour + 12) >= 10) {
time5.textContent = (currentHour + 12) + ':00';
} else {
time5.textContent = '0' + (currentHour + 12) + ':00';
}
temperature1.textContent = data.currentTemp + '°C';
temperature2.textContent = data.temp3 + '°C';
temperature3.textContent = data.temp6 + '°C';
temperature4.textContent = data.temp9 + '°C';
temperature5.textContent = data.temp12 + '°C';

<ul>
<li><span = id="time1">Now</span> <span id="temperature1"> </span></li>
<li><span = id="time2">09:00</span> <span id="temperature2"> </span></li>
<li><span = id="time3">12:00</span> <span id="temperature3"> </span></li>
<li><span = id="time4">15:00</span> <span id="temperature4"> </span></li>
<li><span = id="time5">18:00</span> <span id="temperature5"> </span></li>
</ul>

Answer 2

因为脚本中的textContents只有值，没有添加span。例如

list1.textContent = "Now";使list1的含量变为

"Now"

即使span1.textContent = data.currentTemp + '°C';.

对于这个问题，可以像list1.textContent = "Now" + span1.textContent;一样添加值。

所以在脚本中，在每个list的值中，span的值被附加在

list1.appendChild(span1);

将span的值(如10°C)放入list标签。

然后在list标签(具有10°C值)中将11:00这样的小时值添加到度值上。

// those are just selectors i think theres nothing wrong with them
const span1 = document.querySelector('#span1');
const span2 = document.querySelector('#span2');
const span3 = document.querySelector('#span3');
const span4 = document.querySelector('#span4');
const span5 = document.querySelector('#span5');
const list1 = document.querySelector('#l1')
const list2 = document.querySelector('#l2');
const list3 = document.querySelector('#l3');
const list4 = document.querySelector('#l4');
const list5 = document.querySelector('#l5');
// those are just selectors i think theres nothing wrong with them

let currentHour = 9;
let data = {
temp3: 10,
temp6: 11,
temp9: 12,
temp12: 13,
}
span1.textContent = data.temp3 +'°C';
span2.textContent = data.temp3 + '°C';
span3.textContent = data.temp6 + '°C';
span4.textContent = data.temp9 + '°C';
span5.textContent = data.temp12 + '°C';
list1.appendChild(span1);
list2.appendChild(span2);
list3.appendChild(span3);
list4.appendChild(span4);
list5.appendChild(span5);
if ((currentHour + 3) >= 10) {
list1.textContent = "Now " + list1.textContent ;
list2.textContent = `${currentHour + 3}:00 ` + list2.textContent;
list3.textContent = (currentHour + 6) + ':00 ' + list3.textContent;
list4.textContent = (currentHour + 9) + ':00 ' + list4.textContent;
list5.textContent = (currentHour + 12) + ':00 ' + list5.textContent;
} else {
list1.textContent = "Now " + list1.textContent;
list2.textContent = '0' + (currentHour + 3) + ':00 ' + list2.textContent;
list3.textContent = '0' + (currentHour + 6) + ':00 ' + list3.textContent;
list4.textContent = '0' + (currentHour + 9) + ':00 ' + list4.textContent;
list5.textContent = '0' + (currentHour + 12) + ':00 ' + list5.textContent;
}

<ul>
<li id="l1"><span id="span1"> </span></li>
<li id="l2"><span id="span2"> </span></li>
<li id="l3"><span id="span3"> </span></li>
<li id="l4"><span id="span4"> </span></li>
<li id="l5"> <span id="span5"> </span></li>
</ul>