如何将样式应用于使用 .insertAdjacentHtml 方法创建的元素

Question

我无法将样式应用于使用.insertAdjacentHTML创建的元素。

我试过使用.style.cssText但它不起作用。

.JS：

function addTime(){
const newTimeSpan=document.createElement('span');
const date=new Date();
const currentTime=`${addZero(date.getHours())} : ${addZero(date.getMinutes())} : ${addZero(date.getSeconds())}`
const newTimeSpanText=document.createTextNode(currentTime);
newTimeSpan.appendChild(newTimeSpanText);
newTimeSpan.style.cssText="border:solid 1px black;padding:2px;margin-right:10px;";
const liItem=document.querySelector('li');
liItem.insertAdjacentHTML('afterbegin',newTimeSpan.innerHTML)
}
addTime();

.HTML：

<div class="list-box">
<ul class="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
</ul>
</div>      

我实际上期望在它没有出现的newTimeSpan.innerHtml周围有一个边框。

Answer 1

使用insertAdjacentElement并插入元素，而不是其内容。

(function() {
const newTimeSpan = document.createElement('span');
const date = new Date();
const currentTime = `${new Date().getHours()} : ${new Date().getMinutes()} : ${new Date().getSeconds()}`
const newTimeSpanText = document.createTextNode(currentTime);
newTimeSpan.appendChild(newTimeSpanText);
newTimeSpan.style.cssText = "border:solid 1px black;padding:2px;margin-right:10px;";
const liItem = document.querySelector('li');
liItem.insertAdjacentElement('afterbegin', newTimeSpan);
})()

<div class="list-box">
<ul class="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
</ul>
</div>

Answer 2

问题是你插入了newTimeSpan.innerHTML.这只返回范围内的 HTML，它不返回范围本身，样式是范围的属性。

使用newTimeSpan.outerHTML而不是newTimeSpan.innerHTML，然后它将返回范围的 HTML 及其样式。

function addTime() {
const newTimeSpan = document.createElement('span');
const date = new Date();
const currentTime = `${addZero(date.getHours())} : ${addZero(date.getMinutes())} : ${addZero(date.getSeconds())}`
const newTimeSpanText = document.createTextNode(currentTime);
newTimeSpan.appendChild(newTimeSpanText);
newTimeSpan.style.cssText = "border:solid 1px black;padding:2px;margin-right:10px;";
const liItem = document.querySelector('li');
liItem.insertAdjacentHTML('afterbegin', newTimeSpan.outerHTML)
}
addTime();
function addZero(n) {
return n < 10 ? "0" + n : n;
}

<div class="list-box">
<ul class="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
</ul>
</div>

Answer 3

错误是 innerHTML 而不是 outerHTML：

function addTime(){
const newTimeSpan=document.createElement('span');
// ...
const newTimeSpanText=document.createTextNode('currentTime');
newTimeSpan.appendChild(newTimeSpanText);
newTimeSpan.style.cssText="border:solid 1px black;padding:2px;margin-right:10px;";    
const liItem=document.querySelector('li');
liItem.insertAdjacentHTML('afterbegin',newTimeSpan.outerHTML);
}
addTime();

<div class="list-box">
<ul class="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
</ul>
</div>

Answer 4

Complementary exemple on insertAdjacentElement as solution

使用其他研究员已经证明的insertAdjacentElement是要走的路。你可以看看MDN web文档提供的这个项目：

• 现场演示 - 添加彩色框
• 源代码 - Github

这个演示在理解这个元素的过程中确实帮助了我。

---

希望它也能帮助你！