I am currently utilizing Fontawsome free version 5.15.4, along with Bootstrap 5.1 to develop a table using JavaScript.
let newBtn = createAnyElement("button", {
class: "btn btn-success",
onclick: "createUser(this)"
});
newBtn.innerHTML = `<i class="fas fa-plus-circle"></i>`;
tr.appendChild(newBtn);
return tr;
The green button in this code snippet functions correctly: https://i.sstatic.net/N3gbs.jpg
However, when I implement the following:
let newBtn = createAnyElement("button", {
class: "btn btn-success",
onclick: "createUser(this)"
});
newBtn.innerHTML = `<i class="fas fa-plus-circle"></i>`;
let td = createAnyElement("td");
td.appendChild(newBtn);
tr.appendChild(td);
return tr;
The button disappears and only shows on hover: https://i.sstatic.net/Z1D1K.jpg I'm unable to determine the cause of this issue?
(The createAnyElement function is defined as follows:
function createAnyElement(name, attributes) {
let element = document.createElement(name);
for (let k in attributes) {
element.setAttribute(k, attributes[k]);
}
return element;
}
)
For further clarification, here is the complete newUserRow function implementation:
function newUserRow(row) {
let tr = createAnyElement("tr");
for(let k in {id: '', name: '', email: ''}) {
let td = createAnyElement("td");
let input = createAnyElement("input", {
class: "form-control",
name: k
});
td.appendChild(input);
tr.appendChild(td);
}
let newBtn = createAnyElement("button", {
class: "btn btn-success",
onclick: "createUser(this)"
});
newBtn.innerHTML = `<i class="fas fa-plus-circle"></i>`;
let td = createAnyElement("td");
td.appendChild(newBtn);
tr.appendChild(td);
return tr;
}