我正在尝试使用 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 关注
- 98 浏览
添加回答
举报
0/150
提交
取消