我正在嘗試在“參與者”下添加用戶串列。我當前的代碼在作業參與者旁邊添加元素。
showname.innerHTML = `<h4>participants:</h4>` '<ul>' users.map(function (user) {
return '<li>' user '</li>';
}).join('') '</ul>';
所以我喜歡這樣的東西:
參與者:
-user1
-user2
-user3
但目前是:
參與者:user1 user2 user3
uj5u.com熱心網友回復:
除非您沒有正確分配選擇器,否則您的代碼并沒有太多錯誤。如果您有一個帶有類容器的 div,那么您應該在不更改代碼的情況下執行以下操作。
const showname = document.querySelector('.container');
const users = ['Solomon', 'Abebe', 'Sara'];
showname.innerHTML = '<h4>participants:</h4>' '<ul>' users.map(function (user) {
return '<li>' user '</li>';
}).join('') '</ul>';
另一種選擇是創建 html 元素并將它們附加到現有的
const containerBox = document.createElement('div');
containerBox.classList.add = 'container-box';
showname.appendChild(containerBox);
containerBox.innerHTML = '<h4>participants:</h4>' '<ul>' users.map(function (user) {
return '<li>' user '</li>';
}).join('') '</ul>';
正如我所說,你不需要改變太多。我希望這有幫助。
uj5u.com熱心網友回復:
在 JS 中,您可以使用 createElement(tagName) 創建 HTMl 元素。然后,您可以使用 innerText 或 innerHTMl 將文本添加到 html 到元素中。然后你必須追加到父元素。
作業示例
const ul = document.querySelector('ul');
const ps = ["p1","p2","p3"];
const h4 = document.createElement('h4');
ps.forEach(p => {
const li = document.createElement('li');
li.innerHTML = p;
ul.appendChild(li)
})
<h4>participants:</h4>
<ul></ul>
uj5u.com熱心網友回復:
為什么不簡單地<br>在每個用戶記錄的末尾添加標簽?
showname.innerHTML = '<h4>participants:</h4><br>' '<ul>' users.map(function (user) {
return '<li>' user '</li>' '<br>';
}).join('') '</ul>';
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/483146.html
標籤:javascript html
