如何使用innerHTML显示文本
[英]How to use innerHTML to display text
问题描述
例如，如果我想像这样并排显示来自 javascript 的文本
文字 1 文字 2 文字 3
所以我输入了这个代码
<p id=displayText> <p>
<script type="text/javascript">
function doSomeThing()
{
//do something
document.getElementById("displayText").innerHTML=text1;
//do something
document.getElementById("displayText").innerHTML=text2;
//do something
document.getElementById("displayText").innerHTML=text3;
}
</script>
我只有
文本 3
我该怎么做。
4 个解决方案
解决方案1
3 2015-06-08 12:29:09
+=与非标准属性innerHTML一起使用时可能会出现问题。
您可以通过使用额外的变量来避免在innerHTML上使用+= ：
function doSomeThing()
{
var progress = "";
//do something
progress += text1;
document.getElementById("displayText").innerHTML = progress;
//do something
progress += text2;
document.getElementById("displayText").innerHTML = progress;
//do something
progress += text3;
document.getElementById("displayText").innerHTML = progress;
}
+=是有问题的，如果你这样做：
e.innerHTML += '<a href="#">foo';
e.innerHTML += 'bar';
e.innerHTML += '</a>';
实际输出的 HTML 将是<a href="#">foo</a>bar 。 那是怎么发生的？ 好吧，当您将 innerHTML 设置为<a href="#">foo ，浏览器将尝试为您“修复”它，因此它会添加</a>以使其有效。
还有一些方法可以通过使用 DOM API 适当的document.createElement()/createTextNode()等来完全避免使用innerHTML 。
解决方案2
1 2015-06-08 12:40:40
<p id=displayText> <p>
<script type="text/javascript">
function doSomeThing()
{
var para = document.getElementById('displayText');
para.innerHTML = para.innerHTML + text1;
para.innerHTML = para.innerHTML + text2;
para.innerHTML = para.innerHTML + text3;
}
</script>
解决方案3
0 2015-06-08 12:25:49
您将文本设置为相同的 ID。 创建 3 个 id，而不仅仅是一个。
这样做或那样做：
function doSomeThing()
{
//do something
document.getElementById("displayText").innerHTML = text1;
//do something
document.getElementById("displayText").innerHTML += (" "+text2);
//do something
document.getElementById("displayText").innerHTML += (" "+text3);
}
function doSomeThing()
{
//do something
document.getElementById("displayText1").innerHTML = text1;
//do something
document.getElementById("displayText2").innerHTML = text2;
//do something
document.getElementById("displayText3").innerHTML = text3;
}
//HTML ?
<span id="displayText1"></span>
<span id="displayText2"></span>
<span id="displayText3"></span>
解决方案4
0 2015-06-08 12:32:12
只需搜索一次元素，并将值作为数组传递（更动态且更少限制）。
<html>
<head>
<script>
function doSomeThing(v){
var tE = document.getElementById('displayText');
if (tE) tE.innerHTML = (v || []).join(' ');
}
</script>
</head>
<body onload = "doSomeThing(['text1', 'text2', 'text3'])">
<span id = 'displayText'></span>
</body>
</html>
如何在播放视频时刷新innerHTML本身以显示文本？
[英]How to refresh text innerHTML itself to display while the video is playing?
如何在innerHTML语句中使用变量来显示特定的对象值
[英]How to use a variable in innerHTML statement to display specific object values
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.