如何在 JavaScript 中获取附加元素的值？

Question

我正在创建一个需要多个时间输入的计算器，我需要获取已添加的已创建 div 元素的值。

这是附加元素的代码

let div - document.createElement("div"); 
div.innerHTML = html; 
schedule.appendChild(div.firstElementChild); 

这是正在创建的 html 元素的代码：

<div class = "times"> 
 <input id = "start" type = "time" value = ""> 
 <input id = "end" type = "time"  value = ""> 
</div> 

我需要在 JavaScript 中获取由 JavaScript 代码创建的时间输入的值。我该怎么做？

Answer 1

我想我理解的和你需要的是下面的代码。 . .检查出来，让我知道你的想法。 . .. 当您选择时间时，将触发 onchange 事件，并且该值将作为“

”标签附加到它的父 div。如果您愿意，您也可以将值附加到正文。 . .

let div1 = document.createElement("div"); 
const html1=`
<div class = "times" style='border:1px solid red;width:300px;height:100px;padding:10px;margin:5px;'> 
 <input onchange='change(this)' type = "time" value = "" /> 
 <input onchange='change(this)' type = "time"  value = "" /> 
</div> 
`;
div1.innerHTML = html1; 
let div2 = document.createElement("div"); 
const html2=`
<div class = "times" style='border:1px solid red;width:300px;height:100px;padding:10px;margin:5px;'> 
 <input onchange='change(this)' type = "time" value = "" /> 
 <input onchange='change(this)' type = "time"  value = "" /> 
</div> 
`;
div2.innerHTML = html2; 
let schedule=document.getElementById("schedule");
schedule.appendChild(div1); 
schedule.appendChild(div2); 

function change(e){
    let par=e.parentNode;
    let p=document.createElement('p');
    p.innerHTML=`${e.value}`;
    par.appendChild(p);
}

<div id="schedule" style="border:1px solid blue;width:500px;height:300px;padding:20px;">
 shedule div
</div>