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

但它打印每個值在一個新的段落。我試着改成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; 

你怎麼能正確讀取，我知道上述無效，但什麼是正確的方法來做到這一點？

泰 賈裏德·摩爾

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