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

我无法将样式应用于使用

.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();

<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>      

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.innerHTML)

}
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>      

第1项
第2项
第3项
第4项

---

实际上，我希望在

newTimeSpan.innerHtml

周围有一个边框，但它不会出现。

使用

insertAdjacentElement

并插入元素，而不是其内容

（函数（）{
const newTimeSpan=document.createElement（'span'）；
const date=新日期（）；
const currentTime=`${new Date（）.getHours（）}:${new Date（）.getMinutes（）}:${new Date（）.getSeconds（）}`
const newTimeSpanText=document.createTextNode（当前时间）；
newTimeSpan.appendChild（newTimeSpanText）；
newTimeSpan.style.cssText=“边框：实心1px黑色；填充：2px；右边距：10px；”；
const liItem=document.querySelector（'li'）；
liItem.insertAdjacentElement（'afterbegin'，newTimeSpan）；
})（）

第1项
第2项
第3项
第4项

问题是您正在插入

newTimeSpan.innerHTML

。它只返回范围内的HTML，而不返回范围本身，并且样式是范围的属性

使用

newTimeSpan.outerHTML

而不是

newTimeSpan.innerHTML

，然后它将返回span的HTML及其样式

函数addTime（）{
const newTimeSpan=document.createElement（'span'）；
const date=新日期（）；
const currentTime=`${addZero（date.getHours（））}:${addZero（date.getMinutes（））}:${addZero（date.getSeconds（））}`
const newTimeSpanText=document.createTextNode（当前时间）；
newTimeSpan.appendChild（newTimeSpanText）；
newTimeSpan.style.cssText=“边框：实心1px黑色；填充：2px；右边距：10px；”；
const liItem=document.querySelector（'li'）；
liItem.insertAdjacentHTML（'afterbegin'，newTimeSpan.outerHTML）
}
addTime（）；
函数addZero（n）{
返回n<10？“0”+n:n；
}

第1项
第2项
第3项
第4项

错误是innerHTML而不是outerHTML:

函数addTime（）{
const newTimeSpan=document.createElement（'span'）；
// ...
const newTimeSpanText=document.createTextNode（'currentTime'）；
newTimeSpan.appendChild（newTimeSpanText）；
newTimeSpan.style.cssText=“边框：实心1px黑色；填充：2px；右边距：10px；”；
const liItem=document.querySelector（'li'）；
liItem.insertAdjacentHTML（'afterbegin'，newTimeSpan.outerHTML）；
}
addTime（）


第1项
第2项
第3项
第4项

作为解决方案的InsertAdjaceEntelement补充示例
使用其他研究员已经演示过的
insertAdjacentElement
，这是一条很好的路。您可以通过以下方式查看此项目：





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


希望它也能帮助你
 这比我的解决方案还要好。使用元素比转换为HTML或从HTML转换为HTML更好。在这个用例中效果更好。@NidhinJoseph Joseph ty要知道答案，您是否已更改为
InsertAdjaContement
？@NidhinJoseph ohh我没有看到。谢谢您的指点和宝贵的帮助！谢谢你我终于做到了谢谢你的帮助我终于做到了！