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