javascript - 带有 javascript 的 br 显示为 HTMLBRElement

Question

let br = document.createElement('br');
let tr = tbody.insertRow(tbody.rows.length);
let td = tr.insertCell(tr.cells.length);
td.textContent = item +br; 

除了项目之外，我得到的结果是[object HTMLBRElement]它br本身。我怎样才能br在不使用的情况下获得该项目innerHtml？

Answer 1

item + br执行字符串连接，因此br元素被转换为字符串。将对象转换为字符串会生成[object PrototypeName].

要添加 HTML 元素，请使用appendChild()方法。

td.textContent = item;
td.appendChild(br);

Answer 2

由于您不想松开以前的孩子，您可以像这样使用文档片段

let br = document.createElement('br');
let tr = tbody.insertRow(tbody.rows.length);
let td = tr.insertCell(tr.cells.length);
const fragment = document.createDocumentFragment();
fragment.appendChild(item); // make sure that item is an html element, if it is a text , wrap it inside span or p or div element
fragment.appendChild(br);
td.appendChild(fragment) // all childs of fragment are now transferred to td  

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment了解更多信息

请注意，我可以直接将appendChild一个一个地用于td，但我没有这样做，因为它使浏览器多次渲染，但是通过DocumentFragment，当您将所有孩子一次添加到td时，浏览器必须只渲染一个时间，使您的应用程序更高效，并获得相同的结果。