如何将样式应用于使用.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

insertAdjacentElement上的互补示例作为解决方案

使用其他人已经演示过的insertAdjacentElement是insertAdjacentElement方法。 您可以看一下MDN网络文档提供的这个项目：

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

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

---

希望它也对您有帮助！