javascript - 使用 Javascript 和其他几个问题将输出添加到 DIV

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

2年前关闭。




Improve this question




我正在处理表格。现在它自己的形式很好用，没有问题。但我正在尝试实现以前结果的历史日志。我已经能够让它在基本意义上工作，当一个条目输出到 div 时，它会出现在顶部，而不是第二个出现在下面(附加)。这是我的第一个问题，我希望最近的条目出现在顶部，最旧的条目按降序排列(前置)。

我只是不能让它工作。

的HTML:

<p>History log:</p><br><div id="SecondDIVOutput" style="white-space: 
pre-wrap"></div> 

剧本:

function convertOutput(){
   var output = document.getElementById("output").value;
       SecondDIVOutput.innerHTML+=   "<ul><li><time id='time'></time><br /> 
<br />"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>";
}

我相信这将是一件非常简单的事情，我想完成这项工作，但我一直在努力让它工作。

我还有另外两个问题。我也一直在尝试实现时间戳。

时间戳有效，但是，只会出现在第一个输出上，其余的不会有时间戳

这是时间戳的脚本:

var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
              'July', 'August', 'September', 'October', 'November', 
'December'];
function showTime() {
function twoDigit(n) {
    return ('0' + n).slice(-2);
}
function iso8601(date) {
    return date.getFullYear() +
           '-' + twoDigit(1 + date.getMonth()) +
           '-' + twoDigit(date.getDate()) +
           'T' + twoDigit(date.getHours()) +
           ':' + twoDigit(date.getMinutes());
}
function en_US(date) {
    var h = date.getHours() % 12;
    return MONTH_NAME[date.getMonth()] +
           ' '  + date.getDate() +
           ', ' + date.getFullYear() +
           '<br />' + (h == 0 ? 12 : h) +
           ':'  + twoDigit(date.getMinutes()) +
           ' ' + (date.getHours() < 12 ? 'am' : 'pm');
}

var timeEl = document.getElementById('time');
if (timeEl !== null) {
    var now = new Date();
    timeEl.innerHTML = en_US(now);
    timeDiv.setAttribute('datetime', iso8601(now));
   }
};
setInterval(showTime, 1000);

我很想完成这项工作，因为它看起来真的很好，并且对历史日志很有用。

最后，我真的一直在尝试(希望)使每个输出都成为一个盒子，而不是可以用关闭按钮删除。

我已经能够在一定程度上完成这项工作，输出将出现在一个框中，关闭按钮等等，但该按钮不会与脚本一起使用。

它的脚本:

var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}

我做了一个 Fiddle包含所有相关代码，尽管我无法让所有脚本在 fiddle 中正常运行。如果保存为 .html 并打开它，它确实有效。对不起，我对这一切和学习仍然很陌生。在最后一个上，这甚至可能吗？如果我能做到这一点，我会非常高兴。

非常感谢，我知道这在问题方面很多，但我的目标是将输出放在旧的顶部，每个条目都有一个时间戳，最后使任何单个条目都能够被删除或删除.我正在尝试使用 vanilla JavaScript 解决这个问题。

更新:

我正在尝试使用下面建议的 convertOutput() 来使该功能正常工作，但我不确定如何正确调用它。

脚本:

function convertOutput(){

convertOutput.addEventListener('close', function() {
this.parentElement.style.display = 'none';
}
});

var output = document.getElementById("output").value;
var li = document.createElement('li');
li.className = "containedboxes";
var dateTime = todayDateTime();

li.innerHTML = "<time id='time'>" +  dateTime +"</time><br /> <br />"+ 
output +"<br /><br /><span class='close'>&times;</span>";
   document.getElementById('outputListItem').prepend(li);
}

Answer 1

要回答您的第一个问题，您可以使用 prepend()将内容附加到元素的开头。

function prepend() {
  let div = document.createElement('div');
  div.innerHTML = new Date().getTime();
  document.getElementById('your_id').prepend(div);
}

<div id="your_id"></div>
<button onclick="prepend()">Do Prepend</button>