javascript - 使用 GetElementByClassName 和 GetElementById

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>

但它会在新段落中打印每个值。我尝试改成类名，但我做错了什么。请帮帮我。泰。

<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 和 value？像这样的东西？

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

你怎么能正确阅读，我知道上面的内容无效，但正确的方法是什么？

泰·贾里德·摩尔

Answer 1

这三个部分在三个不同的段落中的原因是你有三个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))

Answer 2

<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>