Add attribute to dynamicaly created table - html

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