Insert html not apply css style

Question

I made insert html in table list. Correctly that can run. But, It dose not apply css. I tried document.ready or windows.load that can't apply css.

I used Bootstrap and Jquery. This code can't apply css from button.

function makeTable(dataList, elId) {
    var id = document.getElementById(elId);

   // Make Button
   var frame = `<td>
                  <button type="button" class="btn btn-warning waves-effect" onclick="alert('{0}')">
                     <i class="material-icons">info_outline</i>
                  </button>
                  <button type="button" class="btn btn-danger waves-effect" onclick="alert('{0}')" data-type="cancel">
                     <i class="material-icons">delete</i>
                  </button>
               </td>`;

    dataList.forEach( data => {
      var tr = document.createElement('tr');
      for (key in data) {
         switch (key) {
            case 'edit':
               tr.appendChild(new DOMParser().parseFromString(frame.format(data[key]), "text/xml").firstChild);
               break;
            default:
               var td = document.createElement('td');
               td.appendChild(document.createTextNode(data[key]));
               tr.appendChild(td);
         }
         
      }
      id.querySelector("tbody").appendChild(tr);
    });
}

It result under picture.

Icon and style was not to apply it.

Can you give us any example page on the CodePen or something? — user5125954
– user5125954, Commented Sep 5, 2020 at 15:01
I don't understand what "cannot apply CSS" means. CSS applies to all page contents, regardless of whether they are added later on or have been there all the time. Please create a minimum, reproducable example ideally in a runnable code snippet here. — CherryDT
– CherryDT, Commented Sep 5, 2020 at 15:30
Also, on your screenshot you seem to have messed up markup in the Edit column. — CherryDT
– CherryDT, Commented Sep 5, 2020 at 15:31

Harlamoff · Accepted Answer · 2020-09-05 14:55:19Z

0

You do not have this css classes on your page. It doesn't depend on js in any way. Perhaps iframe is used so css is not available.

answered Sep 5, 2020 at 14:55

Harlamoff

461 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Funniest Over a year ago

I have css file. This page do not use iframe. When this buttons define in the code. So, it was correctly running. But, Insert html, it was can't run

Harlamoff Over a year ago

JS cannot interfere with the rendering of css in any way. You can make sure like this: var frame = ` <style> .material-icons{ color:red;} </style> <td> ....

Funniest Over a year ago

Maybe i think "new DOMParser().parseFromString" is to wired.

Harlamoff Over a year ago

Please, create example in codepen.io, i will check code .

Collectives™ on Stack Overflow

Insert html not apply css style

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related