Add attribute to dynamicaly created table

Question

Helo,

I'm working with external software which is generating reports. I'm getting table, then it is printed to website in div. I don't have access to this table before it is generated, so i can't set any attribute before website is rendered.

So I need to add attribute to this table as last step of rendering process, it doesn't matter is it ID or Class.

Structure is like:

 <div class="data" id="Checklist">
     <p>Some text</p>

     <!-- There is this table -->
     <table style="...">...</table>

     <p></p> 
 </div>

I'm using IE v11.

I tried something like this (nothing happens):

  document.getElementById("Checklist").childNodes[0].className = "TestClassName";

Also (it gives mi error: Object doesn't support property or method 'setAttribute' )

 document.getElementById('news').childNodes[0].setAttribute( 'class', new_class );

Any other ideas?

Answer 1

If you use ChildNodes it will return all the white space with nodelist so use children so that it will return only child elements

<div class="data" id="Checklist">
     <p>Some text</p>

     <!-- There is this table -->
     <table style="...">...</table>

     <p></p> 
 </div>

Change Your js to

document.getElementById("Checklist").children[0].className="TestClassName";
document.getElementById('news').children[0].setAttribute( 'class', new_class );

it will work

Answer 2

try this to add class

document.getElementById("Checklist").classList.add("TestClassName");


document.getElementById('Checklist').childNodes[1].setAttribute('class', 'table1');

.TestClassName {
  color: red;
}

.table1 {
  border: solid 1px;
}

<div class="data" id="Checklist">
  <p>Some text</p>

  <!-- There is this table -->
  <table style="...">...</table>

  <p></p>
</div>

Answer 3

Try this

 <div class="data" id="Checklist">
     <p>Some text</p>

     <!-- There is this table -->
     <table style="...">...</table>

     <p></p> 
 </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $("#Checklist").children('table').attr("class", "class_name");
</script>

change class_name with your class name

Answer 4

Assuming this is your code,

<div class="data" id="Checklist">
    <p>Some Text</p>
    <div id="WhereTableWillGo">
        <table></table>
    </div>
    <p></p>
</div>

You could do the alterations within a window.onload function,

window.onload = function() {
     document.getElementById("Checklist").getElementsByTagName("table")[0].classList.add("NewClass");
     // OR 
     document.getElementById("Checklist").getElementsByTagName("table")[0].setAttribute("class", "TestClassName");
}

Or you could fetch the table asynchronously by doing the following, and do your alterations before inserting the table,

var xhttp = new XMLHttpRequest;
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // Do Alterations to Table
        document.getElementById("WhereTableWillGo").innerHTML = xhttp.responseText;
    }
}
xhttp.open("GET", "https://website.com");
xhttp.send();