Question

我想在同一段中打印变量但在不同的行上。我正在使用它：

<p id="demo1"></p><p id="demo2"></p><p id="demo3"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
document.getElementById("demo1").innerHTML=lastname;
document.getElementById("demo2").innerHTML=age;
document.getElementById("demo3").innerHTML=job;
}
</script>

但它会在新段落中打印每个值。我尝试改用classname，但我做错了。请帮帮我。 TY。

<p class="demo1, demo2, demo3"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
document.getElementByClassName("demo1").innerHTML=lastname;
document.getElementByClassName("demo2").innerHTML=age;
document.getElementByClassName("demo3").innerHTML=job;
}
</script>

也可以使用

document.getElementById("demo1").innerHTML=lastname;

还有一个id和值，然后结束？像这样的东西？

document.getElementById("demo1,demo2,demo3").innerHTML=lastname,age,job;

如何正确阅读，我知道上述内容无效，但正确的做法是什么？

泰 Jared Moore

Answer 1

<p id="demo1"></p>
<button type="button" onclick="myFunction()">Try It!</button>
<script>
function myFunction()
{
var lastname="Doe";
var age=30;
var job="carpenter";
var concat = lastname + '<br />' + age + '<br />' + job
document.getElementById("demo1").innerHTML=concat;

}
</script>

Answer 2

这三个部分分为三个不同段落的原因是你有三个p元素。如果您希望所有值都在同一段落中，则应使用内联元素，例如span。这就是它的样子：

<p><span id="demo1"></span><span id="demo2"></span><span id="demo3"></span></p>

顺便说一句，使用innerHTML要求有人破解你的网站;如果您的真实代码看起来像这样：

element.innerHTML = userSuppliedData

然后任何人都可以通过以下方式运行他们想要的任何JavaScript：

<script type="text/javascript">
  alert('All your site are belong to us.');
</script>

这称为跨站点脚本，XSS。相反，这样做：

element.appendChild(document.createTextNode(userSuppliedData))

使用GetElementByClassName和GetElementById

2 个答案: