I have the following input and button
const inputNotice = document.createElement("input");
inputNotice.type = "text";
r.insertCell(26).appendChild(inputNotice.cloneNode(true));
//new button
const Noticebutton = document.createElement("button");
Noticebutton.type = "button";
Noticebutton.textContent = "Send Notice";
r.insertCell(26).appendChild(Noticebutton);
Im trying to get the input field and button to sit in 1 cell in the table, it creates these in 2 separate cells.
create a div having input and button as children and then append this as the child of the cell like this:
const div= document.createElement('div');
const inputNotice = document.createElement('input');
const Noticebutton = document.createElement("button");
div.appendChild(inputNotice);
div.appendChild(NoticeButton);
Since there is no html template provided, I have had one of my own to do the illustration.
The idea is to add both of the elements inside a container and then append that container to the cell as a child.
In the following illustration I have used a div as a container. Feel free to choose one of which that suits the needs.
const nonWorkingRow = document.querySelector('#cell-host-non-working');
const inputNotice = document.createElement("input");
inputNotice.type = "text";
// inputNotice.style.display = 'inline block';
nonWorkingRow.insertCell(0).appendChild(inputNotice.cloneNode(true));
//new button
const Noticebutton = document.createElement("button");
Noticebutton.type = "button";
Noticebutton.textContent = "Send Notice";
// Noticebutton.style.display = 'inline block';
nonWorkingRow.insertCell(0).appendChild(Noticebutton.cloneNode(true));
const workingRow = document.querySelector('#cell-host');
const container = document.createElement('div');
container.appendChild(inputNotice);
container.appendChild(Noticebutton);
workingRow.insertCell(0).appendChild(container);.column-bordered-table thead td {
border-left: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
}
.column-bordered-table td {
border-left: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
}
.column-bordered-table tfoot tr {
border-top: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
}<h1>Non Working</h1>
<table id="row-host-non-working" class="column-bordered-table">
<tr id="cell-host-non-working" style="outline: thin solid">
<td>
<p>Hello</p>
</td>
</tr>
</table>
<h1>Working</h1>
<table id="row-host-working" class="column-bordered-table">
<tr id="cell-host" style="outline: thin solid">
<td>
<p>Hello</p>
</td>
</tr>
</table>WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET
Instead of inserting a new cell twice (which is the cause of your problem), do that only once and work with the reference insertCell provides:
const cell = r.insertCell(26);
const inputNotice = document.createElement("input");
inputNotice.type = "text";
const Noticebutton = document.createElement("button");
Noticebutton.type = "button";
Noticebutton.textContent = "Send Notice";
cell.append(inputNotice, Noticebutton);
Notice I'm using append here, not appendChild, because it allows to pass a number of elements to it rather than just one.