CODEWITHSUNDEEP
javascripthtmlcss
shauna vayne
shauna vayne

Reputation: 169

How to apply styling to elements created with .insertAdjacentHtml method

I can't apply styling to elements created with .insertAdjacentHTML.

I've tried using .style.cssText but it doesn't work.

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>

I was actually expecting to have a border around the newTimeSpan.innerHtml it doesn't appear.

Upvotes: 2

Views: 2387

Answers (4)

Luis Febro
Luis Febro

Reputation: 1850

Complementary exemple on insertAdjacentElement as solution

Using insertAdjacentElement as already demonstrated by the other fellows is way to go. You can take a look in this project provided by MDN web docs:

This DEMO really helped me out in the process of understanding this element.

Hope it helps you too!

Upvotes: 0

tom
tom

Reputation: 10529

The mistake is innerHTML instead of 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>

Upvotes: 0

Barmar
Barmar

Reputation: 780688

The problem is that you're inserting newTimeSpan.innerHTML. That just returns the HTML inside the span, it doesn't return the span itself, and the styles are attributes of the span.

Use newTimeSpan.outerHTML instead of newTimeSpan.innerHTML, then it will return the HTML of the span, along with its stylying.

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>

Upvotes: 1

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

Use insertAdjacentElement and insert the element, not its content.

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

Upvotes: 2

Related Questions