如何將樣式應用於使用.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在理解這個元素的過程中確實幫助了我。

---

希望它也對您有幫助！