Multiple elements using appendChild for table-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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.

Illustration

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" >
  <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" >
  <tr id="cell-host" style="outline: thin solid">
    <td>
      <p>Hello</p>
    </td>
  </tr>
</table>

WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET

CodePudding user response：

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.