[英]How to use innerHTML to display text
for example if i want to display text from javascript side by side like this例如,如果我想像这样并排显示来自 javascript 的文本
text1 text2 text3文字 1 文字 2 文字 3
so I typed this code所以我输入了这个代码
<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>
I got only我只有
text3文本 3
how can I do it.我该怎么做。
+=
can be problematic when used with the non-standard property innerHTML
. +=
与非标准属性innerHTML
一起使用时可能会出现问题。
You can avoid using +=
on innerHTML
by using an extra variable:您可以通过使用额外的变量来避免在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;
}
+=
is problematic if you do: +=
是有问题的,如果你这样做:
e.innerHTML += '<a href="#">foo';
e.innerHTML += 'bar';
e.innerHTML += '</a>';
The actual output HTML will be <a href="#">foo</a>bar
.实际输出的 HTML 将是<a href="#">foo</a>bar
。 How did that happen?那是怎么发生的? Well, when you set the innerHTML to <a href="#">foo
the browser will try to 'fix' it for you so it adds the </a>
to make it valid.好吧,当您将 innerHTML 设置为<a href="#">foo
,浏览器将尝试为您“修复”它,因此它会添加</a>
以使其有效。
There are also ways to avoid using innerHTML
entirely by using the DOM API proper document.createElement()/createTextNode()
etc.还有一些方法可以通过使用 DOM API 适当的document.createElement()/createTextNode()
等来完全避免使用innerHTML
。
<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>
you set the texts to the same ID.您将文本设置为相同的 ID。 Create 3 ids, not only one.创建 3 个 id,而不仅仅是一个。
do this or that :这样做或那样做:
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>
Merely seach for the element once and also pass the values as array (more dynamic and less limited).只需搜索一次元素,并将值作为数组传递(更动态且更少限制)。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.