我正在嘗試使用 JavaScript 將元素添加到 DOM。我有一個ul，我想添加一個li。使用起來并不困難appendChild，但我希望我的li更復雜。這是我想要實現的輸出：<li> <span class="author">Me</span> <span class="message">Message...</span> <span class="time"> <div class="line"></div> 15:21 </span></li>let author = "me";let message = "Message...";let time = "15:21";正如您所看到的，我想要實現的不僅僅是一些基本li文本（innerHTML），而是相當大的 HTML 代碼塊。我的問題是如何使用 JavaScript 獲得此輸出。或者我應該使用一些 JavaScript 庫或其他東西來使它更容易？
5 回答
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
您可以使用字符串插值將變量添加到代碼中，如下所示
function appendHtml(el, str) {
? var div = document.createElement('div'); //container to append to
? div.innerHTML = str;
? while (div.children.length > 0) {
? ? el.appendChild(div.children[0]);
? }
}
let author = "me";
let message = "Message...";
let time = "15:21";
var html = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
appendHtml(document.body, html);
翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
如果你想插入 html 元素字符串作為 html 節點，你必須創建 html 元素來使用appendChild()
但是，insertAdjacentHTML()如果作為字符串傳遞，則允許您添加 html 元素。 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
let author = "me";
let message = "Message...";
let time = "15:21";
let str = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
document.querySelector('#nav').insertAdjacentHTML('beforeend', str);
<ul id='nav'><ul>
let html = `<li>
<span class="author">Me</span>
<span class="message">Message...</span>
<span class="time">
<div class="line"></div>
15:21
</span>
</li>`;
document.querySelector('#list').insertAdjacentHTML('beforeend', html);
<ul id='list'></ul>
偶然的你
TA貢獻1841條經驗 獲得超3個贊
您可以使用模板文字來insertAdjacentHTML實現干凈的方法。
function createListItem({ author, message, time }) {
? return `<li>
? ? <span class="author">${author}</span>
? ? <span class="message">${message}</span>
? ? <span class="time">
? ? ? <div class="line"></div>
? ? ? ${time}
? ? </span>
? </li>`;
}
const ul = document.querySelector('ul');
ul.insertAdjacentHTML('beforeend', createListItem({
? author: 'me',
? message: 'Message...',
? time: '15:21'
}));
.line { display: inline };
<ul>
? <li>Current</li>
</ul>
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
這是一個你可以使用的小技巧。
您實際上可以使用現有的 DOM (HTML) 作為一種模板，基本上克隆元素，然后用您想要的值替換部分。
首先，您使用remove從DOM中刪除該元素，盡管該元素已從DOM中刪除，但這并不能阻止您克隆它。
現在，每當您需要另一個時，請調用clone(true), true = deepClone，然后使用 querySelector 將 DOM 的一部分替換為您想要的位。最后將這個克隆元素添加到 DOM 中。
下面是一個簡單的例子..
const ol = document.querySelector('ol');
const template = document.querySelector('li');
template.remove();
function append(o) {
const {author, message, time} = o;
const clone = template.cloneNode(true);
clone.querySelector('.author').innerText=author;
clone.querySelector('.message').innerText=message;
clone.querySelector('.time').lastChild.nodeValue=time;
ol.appendChild(clone);
}
append({
author: "me",
message: "Message...",
time: "15:21"
});
append({
author: "Another me",
message: "Something else..",
time: "12:42"
});
append({
author: "Whatever",
message: "lalala..",
time: "17:20"
});
.author {
font-weight: bold;
margin-right: 1rem;
}
.time {
color: green;
}
li {
margin: 0.5rem;
border: 1px solid silver;
}
.line {
border-bottom: 1px dotted red;
}
<ol>
<li>
<span class="author">Me</span>
<span class="message">Message...</span>
<span class="time">
<div class="line"></div>
15:21
</span>
</li>
</ol>
尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
更簡單，（對我來說）
const DomParser = new DOMParser()
function makeLI( author, message, time)
{
let ElemLI =
`<li>
<span class="author">${author}</span>
<span class="message">${message}</span>
<span class="time">
<div class="line"></div>
${time}
</span>
</li>`
return (DomParser.parseFromString( ElemLI, 'text/html')).body.firstChild
}
// proof...
myList.appendChild(makeLI('you','Message...','15:21'))
myList.appendChild(makeLI('me','someone in ?','21:25'))
<ul id="myList"></ul>
- 5 回答
- 0 關注
- 197 瀏覽
添加回答
舉報
0/150
提交
取消