使用javascript更新div中的文本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用javascript更新div中的文本相关的知识，希望对你有一定的参考价值。
对于编程来说是相当新的，如果这是一个愚蠢的问题，请对不起。我有两个（非常相似）的功能：
function getRingNumbers(queueID, divID)
$.ajax(
url: `https://api.mypurecloud.de/api/v2/routing/queues/$queueID/users`,
type: "GET",
beforeSend: function(xhr)xhr.setRequestHeader('Authorization', 'bearer ' + globalToken);,
success: function(data)
var i;
for (i = 0; i < data.entities.length; i++)
if (i % 2 == 1)
var div = document.getElementById(divID);
div.innerhtml += '<center><p class="odd">' + data.entities[i].ringNumber + '</p></center>';
else
var div = document.getElementById(divID);
div.innerHTML += '<center><p class="even">' + data.entities[i].ringNumber + '</p></center>';
);
和
function updateRingNumbers(queueID, divID)
$.ajax(
url: `https://api.mypurecloud.de/api/v2/routing/queues/$queueID/users`,
type: "GET",
beforeSend: function(xhr)xhr.setRequestHeader('Authorization', 'bearer ' + globalToken);,
success: function(data)
var i;
for (i = 0; i < data.entities.length; i++)
if (i % 2 == 1)
var div = document.getElementById(divID);
div.innerHTML = '<center><p class="odd">' + data.entities[i].ringNumber + '</p></center>';
else
var div = document.getElementById(divID);
div.innerHTML = '<center><p class="even">' + data.entities[i].ringNumber + '</p></center>';
);
我想以30秒的间隔运行第二个功能，因此它可以使振铃号保持更新。我在代码中所做的唯一更改是在= @ div.innerHTML（+）=之前删除+。根据我在互联网上可以找到的所有文档，这应该使用新信息更新div。但是，我一直处于“未定义”状态，并且仅清除振铃号数据。当我按间隔运行第一个函数时，此方法确实起作用，但这会继续创建div，这不是我想要的。
任何人都知道是什么原因造成的，以及如何解决它？谢谢。
答案
您需要重置innerHTML并仍将其串联。没有+ =，您将只看到最后一个条目。您可以将innerHTML与一起使用或创建元素。我更喜欢创建元素。
success: function(data)
var div = document.getElementById(divID);
// empty the content
div.innerHTML = '';
// loop over your array
data.entities.forEach(function(entry, index)
// create a p element
var p = document.createElement("p");
// set your class
p.className = index % 2 == 1 ? 'odd' ? 'even';
// add the text
p.textContent = data.entities[i].ringNumber;
// add it to your div
div.appendChild(p);
)
现在您可以只使用CSS来控制奇数或偶数，并以文本对齐方式使内容居中。
#myWrapper p
background-color: #CCC;
text-align: center
#myWrapper p:nth-child(odd)
background-color: #777;
<div id="myWrapper">
<p>Bacon 1</p>
<p>Bacon 2</p>
<p>Bacon 3</p>
<p>Bacon 4</p>
<p>Bacon 5</p>
<p>Bacon 6</p>
</div>以上是关于使用javascript更新div中的文本的主要内容，如果未能解决你的问题，请参考以下文章
contentEditable div 中的粗体选定文本，使用纯 JavaScript，不使用 jQuery 等库
JavaScript setInterval 函数不更新 <div> 元素中的 Gridview