React中的insertRow()和appendChild()等效
在React中，insertRow()和appendChild()是用于在DOM中插入新元素的方法。它们的作用类似，但在React中有一些区别。
- insertRow()方法：insertRow()方法是用于在表格中插入新行的方法。它可以在指定位置插入新行，并将现有行向下移动。insertRow()方法接受一个参数，即要插入的行的索引位置。
在React中，由于使用虚拟DOM的概念，直接操作DOM是不推荐的做法。因此，使用insertRow()方法来直接插入新行是不常见的。相反，React鼓励使用状态和属性来管理组件的渲染。
- appendChild()方法：appendChild()方法是用于在指定元素的子节点列表的末尾插入新节点的方法。它将新节点添加到指定元素的子节点列表的末尾。
在React中，直接使用appendChild()方法来插入新节点也是不推荐的做法。React使用虚拟DOM来管理DOM的更新，通过使用组件的状态和属性来动态渲染DOM。
在React中，通常使用setState()方法来更新组件的状态，并根据状态的变化重新渲染组件。通过在render()方法中返回新的元素来实现插入新元素的效果。
总结： 在React中，insertRow()和appendChild()方法并不是常用的操作DOM的方法。React鼓励使用状态和属性来管理组件的渲染，并通过重新渲染组件来实现插入新元素的效果。因此，在React中，我们不推荐直接使用insertRow()和appendChild()方法来插入新元素。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙服务（Tencent Cloud Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
我已经使用HTML标签在javascript中创建了十个单独的表。现在，我想将这些表放入网格格式中，因此我认为将它们放入另一个表中将是可行的。这段代码只会显示一个空表。有什么帮助吗？谢谢!
document.getElementById('InstalledApps').innerHTML += '<table id="bigAppsTable" border="1"><td>';
for (var i = 9; i>-1;i--){
document.getEleme
浏览 0提问于2013-09-09得票数 1
1回答
所以我有这个表，如果值相同的话，我需要值"Age“和"ID”文本为红色。
Index.html
<html>
<body>
<div id="table"></div>
<script src="script.js"></script>
</body>
</html>
script.js
tableData = [
{ id: 23, date: "01/01/1999", age: "23"
浏览 2提问于2022-05-15得票数 0
1回答
事件侦听器，JavaScript
、、、、
每次单击nav链接并删除旧的内容时，如何在DOM中显示新内容。点击时，我一个接一个地得到内容，我想删除旧的，然后显示我点击的那个等等。我在使用数据库中的数组。这是代码：
$(dataItems).on('click', 'li a', function (event) {
event.preventDefault();
let id = $(this).attr('data-code'); // sort them by their data-code
const childrenItems = []; // push the so
浏览 2提问于2020-03-09得票数 2
回答已采纳
1回答
var otbody = document.createElement('tbody');
var otr = otbody.insertRow(ordernumber);
otr.id="order" + ordernumber;
var pidCell = otr.insertCell(0);
在IE7中执行insertRow时出现错误。我使用的是ie9的IE7模式，其他的mode也有insertRow方法。我在调试器控制台中尝试了0，-1，1等作为此方法的参数，但都返回null。当我使用doc
浏览 1提问于2011-04-29得票数 3
更新
此代码适用于：
name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);
for (station_index in station_detail)
{
newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1);
newCell = newRow.insertCell(-1);
newCell.appendChild(
浏览 0提问于2012-11-20得票数 0
回答已采纳
在使用Javascript动态创建单元之后，我在创建div时遇到了困难。我的目标是能够在下面添加完全相同的原始表行及其内容。下面是HTML代码：
<table width="100%" id="processTable">
<tr>
<td id="ProcessDetails"><div id="description">Replace with description.</div>
<div id="QuestionT
浏览 1提问于2015-01-19得票数 3
回答已采纳
我正在做一个作业，在那里我需要使用Javascript创建一个表。
我遇到了一个问题，需要创建一个按钮并删除tbody元素中的第一行元素。
我试过onclick和addEventListener一样，没有一个为我工作。
下面是我的代码
"use strict";
//Create table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//Create t
浏览 0提问于2017-02-20得票数 0
回答已采纳
我有一个关于动态创建现有HTML表的问题。很抱歉，如果问题看起来很愚蠢，但我是JavaScript的初学者。下面是HTML (我不能在这里更改任何HTML代码)
我必须用JavaScript添加行，但是由于我不能将表id添加到insertRow代码中，所以不可能通过insertRow()函数来实现。我尝试过使用这段代码，但它不起作用(甚至对getElementsByClassName(“some”)也不行)。未创建行。代码：
var something = getElementsByTagName('table');
var tableca = something[0];
浏览 6提问于2016-01-03得票数 1
回答已采纳
我看过和表body方法，没有提到如何插入HTMLTableRowElement。有人知道如何将HTMLTableRowElement插入到表主体中吗？
const tbody = document.getElementsByTagName('tbody')[0];
// Only inserts an empty row
// Want to insert a HTMLTableRowElement that I've parsed using jsdom
tbody.insertRow();
编辑：使用指导@frontend_dev，似乎没有使用原生DOM元素。因此，
浏览 4提问于2016-07-16得票数 1
回答已采纳
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本身。如何在不使用innerHtml的情况下在项目后面添加br？
浏览 16提问于2021-01-21得票数 0
回答已采纳
我有如下代码，
<?php
$actionbutton = '<input type="button" onclick="document.location.href=\'/backoffice_dev.php/currency/edit/EUR\';" value="Edit">';
$tr = '<tr><td>'.$addNewCurrencyPOST["id"].'</td>
<td><div
浏览 2提问于2014-02-27得票数 0
回答已采纳
如何使用纯JavaScript在Table标记中创建TBody标记？(没有手动篡改HTML代码)。有HTMLTableElement.createTHead()和HTMLTableElement.createTFoot()函数，但没有关于TBody元素的函数。此外，一旦创建了THead元素，使用HTMLTableElement.insertRow()添加到表中的所有以下行都会添加到THead元素中。
那么，如何在不手动篡改THead的情况下创建一个TBody元素呢？
浏览 1提问于2011-06-26得票数 20
回答已采纳
我正在从一个API获取数据，我希望在一个包含3列和动态行的表中显示这些数据-这是因为API数据 我在这里有这个代码： })
})
//console.log(await response.json())
const balancestoken = await response.json()
function generateTableHead(table, data) {
let thead = table.createTHead();
浏览 12提问于2021-08-18得票数 0
回答已采纳
对不起，我对Javascript很陌生，这是我创建的第一批网站之一。我想知道为什么我的代码不能正常工作。
在应该显示的单元格中，不是显示文本框和按钮，而是显示object HTMLInputElement和object HTMLButtonElement。
function frenchBread(x){
var table = document.getElementById("orderTable");
var row = table.insertRow(0);
var rem = document.createElement("
浏览 5提问于2015-01-15得票数 1
回答已采纳
向表中添加行时，首选哪种方法？
var tr = tbl.insertRow(-1)；
或
var tr = document.createElement('tr')；tbl.appendChild(tr)；
浏览 0提问于2009-05-18得票数 7
回答已采纳
7回答
我有一个表，其中每行包含4个单元格，每个单元格默认包含一个文本框。我只有1行和一个按钮，允许我在每次点击时添加一个额外的行。
如何在Javascript中动态添加包含文本框的表行？
我还想让他们的文本框id更改：
<input type="text" id="txtbox1" />
<input type="text" id="txtbox2" />
现在，我有添加单元格的代码：
JavaScript:
<script type="text/javascript">
fu
浏览 0提问于2013-07-17得票数 3
回答已采纳
有一个excel，它的一些行被合并，我们需要创建一个与它在excel中显示的布局相同的表，并填充数据库中的数据。 布局如下所示： Excel Table 我尝试使用以下代码： for (let group of group_list) {
var table = document.createElement("table")
table.setAttribute("id","summaryTbl");
$('#main').append(table);
var row = tabl
浏览 15提问于2020-07-23得票数 0
回答已采纳
3回答
我正在创建表并将它填充到两个div中，第一个div是小的，第二个是大视图的div，其他图工作得很好，但是元素不工作，它填充最后一个div。您可以在这里看到代码和。
$("#sample").empty()
$("#fulls").empty()
var table = document.createElement('table');
table.className="report";
var first = table.insertRow(0);
first.className= "headerTable";
va
浏览 10提问于2014-07-23得票数 1
回答已采纳
1回答
我想把这个扣子
<button class="btn btn-primary btn-fab btn-icon btn-round">
在名为"Details“的列中
但我不知道怎么做，这是我的代码
var tableRef = document.getElementById('ticker_table').getElementsByTagName('tbody')[0];
var tickerArray = [];
for (i = 0; i < 10; i++) {
var
浏览 9提问于2019-10-23得票数 0
回答已采纳
我正在使用JavaScript动态创建表。我有一个我想要的最小示例。下面是要生成的HTML： <table id='mainTable'>
<tr>
<td> Row 1 Cell 1 </td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
浏览 13提问于2019-05-14得票数 0
回答已采纳
我有一个表格，并将其设置为使用按钮动态添加行。我在弄清楚如何在最后动态添加一个令人敬畏的字体图标时遇到了一些问题。
下面是添加表格行的代码。它添加了需要的前四个单元格，但我需要第五个单元格，如果你想成为FA的图标。
var insertRow = document.getElementById("addRow");
insertRow.onclick = function() {
var x = document.getElementById("myTable");
var row = x.insertRow(x.rows.length);
var c
浏览 2提问于2017-07-29得票数 5
1回答
我一直在尝试创建一个由JavaScript创建的表。我最终找到了创建表的方法，但我缺乏将输入标记和表单放入该表的知识 var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "Replace this with other input";
cell2.innerHTML = "Replace t
浏览 3提问于2019-02-02得票数 0
2回答
使用以下代码向元素添加html表。我想在cell2，cell3，cell4 & cell5周围添加一条细灰色的边框。我知道如何对普通的HTML表执行此操作，但不确定如何将其添加到以innerHTML形式返回的表中。
var table = document.createElement('table');
var row0 = table.insertRow(0);
var cell1 = row0.insertCell(0);
cell1.innerHTML = "My Table";
var row1 = table.insertRow(1);
va
浏览 6提问于2014-11-12得票数 0
回答已采纳
我有一个来自php的变量，通过它我可以将其转换为JSON。 var myData = <?php echo json_encode($json_array) ?>; 当我得到一个控制台日志时，输出格式类似于： 0:
Carat: "0.70"
Clarity: "VVS2"
Color: "D"
Cut: "Very Good"
Polish: "Fair"
Price: "2806"
Product ID: "17"
Product Name: "0.7 C
浏览 4提问于2019-09-19得票数 0
回答已采纳
我试图从外部json文件中获取数据，并使用它生成一个表。我在第52行“Uncaught:无法将未定义或null转换为Function.keys的对象”中遇到了一个问题。当我注释掉前两个异步函数时，使用‘山区’变量和引用‘山脉’中的示例数据，而不是使用html表按预期生成的用户。我认为这个问题与我的第二个异步函数有关，但我是个新手。任何帮助都很感激！
async function getUsers() {
let url = '../assets/names.json';
try {
let res = await fetch(url);
浏览 1提问于2022-03-01得票数 0
回答已采纳
我创建了一个动态表，没有任何问题。但我搞错了行号。另外，当我移除一行时，我需要按升序显示正确的数字。
var myHead = new Array();
myHead = ['Title1','Title2', 'Title3',''];
function createTable() {
var myTable = document.createElement('table');
myTable.setAttribute('id', 'myTable')
浏览 0提问于2018-11-01得票数 0
回答已采纳
2回答
我正在尝试使用javascript向表中添加几个按钮，但是[objectHTMLInputElement]一直提供给我这个结果。
这是我的代码：
function createDiseaseTable(country){
var displayCountry = document.getElementById("countrySelected");
displayCountry.innerHTML = country.name;
var diseaseTable = document.getElementById("diseases&#
浏览 0提问于2014-07-14得票数 1
回答已采纳
我是JavaScript的新手，不知道这个问题是否非常基本。我使用从外部WebSocket获取的数据创建了一个比特币价格更新仪表板。我设法从WebSocket中获取数据并将其显示在HTML上。价格每秒钟更新一次，所以表行变得疯狂了。我希望将表行限制为14行，在表获得14行之后，我希望删除该数据，并使用Websocket导入新数据，而不增加HTML表行。我尽了最大的努力解释。
我已经提供了下面的代码片段以及外部Websocket，我是从那里提取数据的。
请告诉我如何动态地将行插入到HTML表中。提前谢谢你
<script>
window.onload = ()
浏览 7提问于2022-01-09得票数 0
回答已采纳
1回答
在显示Firebase数据库和表中的所有值时，我需要一些帮助。实际上，它只是在表中单独显示第一个值。
结果：
var tblCodes = document.getElementById('tbl_qrcode_list');
var databaseRef = firebase.database().ref('qrcode/');
var rowIndex = 1;
databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapsh
浏览 0提问于2019-04-09得票数 0
回答已采纳
1回答
以下是错误：
function_script_cashier.js:108 Uncaught :未能在'Node‘上执行'appendChild’：参数1不是‘Node’类型。
在AddMenuOnTable (function_script_cashier.js:108)
在HTMLButtonElement.onclick (cashier.php:1)
下面是我的OnClick函数(来自AJAX的回显)：
<button onclick="AddMenuOnTable(\''.$row['kode_menu'].
浏览 1提问于2017-04-25得票数 0
如何将表的值从脚本标记添加到html的表中，其中id = #show?
var arrHead = new Array();
arrHead = ['', 'Student Name', 'Department', 'Age'];
function createTable() {
var stuTable = document.createElement('table');
stuTable.setAttribute('id', &#
浏览 3提问于2021-05-13得票数 1
我是动态javascript的新手，我在动态HTML表中添加了一个按钮。
function addToTable(){
var table = document.getElementById("table");
var row = table.insertRow(counter + 1);
var removeRow=document.createElement("BUTTON");
var cell0 = row.insertCell(0)
var cell1 = row.insertCell(1);
va
浏览 2提问于2014-07-25得票数 0
回答已采纳
2回答
我已经创建了一个html表，通过一个按钮，我给出了向表动态添加更多行的可能性。问题是，我不知道如何添加3个文本框和一个输入类型号(输入类型号必须属于单元格3)，每个单元格动态创建一个。这是我的职责：
function Add()
{
var tableRef = document.getElementById('tabella').getElementsByTagName('tbody')[0];
// Insert a row in the table at the last row
var newRow = tableRef.insertRow(tab
浏览 2提问于2014-03-17得票数 0
回答已采纳
如何才能只填充偶数单元格中的数组值，并在每个奇数单元格中插入单个元素？
//I have an Array with following values :
let Array = [1, 2, 3, 4, 5];
//And HTML Element :
let Element = "<span> Some Element </span>"
// I create a table with cells = length of elements * 2
let newTable = document.createElement("table&#
浏览 1提问于2018-05-08得票数 0
回答已采纳
1回答
我正在使用DOM创建一个表。我想为每一行插入一个“删除”按钮。我所尝试的操作将删除整个表。我应该在哪里创建button元素？ function MakeTable(iArray)
{
var myArray = [];
var table = document.getElementById("myTable");
var button = document.createElement("button");
for(var i = 0; i< iArray.length;
浏览 76提问于2019-10-07得票数 0
回答已采纳
3回答
我目前正在使用以下代码创建基于JSON API的表。我想将表列的标题更改为Name和Score，而不是userName和userScore... 我曾尝试调整创建表列的forEach语句，但不起作用…… axios
.get("[ip censored]/scores")
.then(function(response) {
let sortedList = response.data.sort((a, b) => b.userScore - a.userScore);
console.warn(sortedList);
// EXTRACT VALUE FO
浏览 12提问于2019-03-08得票数 0
回答已采纳
2回答
我的数据是：
var manholeInfo = [{name: "manhole", date_key: "date"}]
我想做一张像这样的桌子：
但结果是这样的：
代码：
var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style', "width:160px;text-align:center;padding:
浏览 5提问于2020-10-29得票数 2
回答已采纳
我的代码是这样的，但是删除botton，不是工作
var newList = snapshot.val();
var tableList = document.getElementById('mytable');
var rowIndex = 1;
var row = tableList.insertRow(rowIndex);
var cellName = row.insertCell(0);
var cellBottonDelete = row.insertCell(1);
cellName.appendChild(document.createTextNode(
浏览 0提问于2017-09-18得票数 0
回答已采纳
我尝试在React中使用以下代码： export const JsonToTable = (jsonArr) => {
var cols = [];
for (var i = 0; i < jsonArr.length; i++) {
for (var key in jsonArr[i]) {
if (cols.indexOf(key) === -1) {
cols.push(key);
}
}
}
var table = document.createElement("table");
v
浏览 20提问于2019-08-31得票数 0
回答已采纳
我的教授指派我做以下工作:创建一个HTML来使用JavaScript实现文档对象模型的概念。
使用getElementById方法并写入元素使用getElementsTagName方法并更改颜色并将边框添加到元素使用getElementsByClassName方法，对于具有相同类名的段落和标题，更改对齐使用querySelectorAll方法并在单击上创建表
但是我不知道如何实现最后一个..。能帮我个忙吗？
function msg4(){
var table = querySelectorAll("table");
//alert("Testing..
浏览 1提问于2020-12-01得票数 0
回答已采纳
3回答
在中绑定jSon数据
、、、
我正在尝试导入excel数据，并最终将其绑定到HTML表。目前，它可以工作，但我对数据绑定做了一点小小的更改，不幸的是无法按预期绑定数据。下面是我已经尝试过的带有示例jSon数据的代码片段：
var data = [{
ID: "1002",
EMAIL: "hello@sample.com"
},
{
ID: "1004",
EMAIL: "hello2@sample.com"
},
{
ID: "1006",
EMAIL: "hello
浏览 4提问于2020-12-07得票数 0
回答已采纳
程序显示的表格中的input作为默认文本。我想知道如何用具有id的输入文本框替换它。谢谢
<html>
<body>
</body>
<script>
function tableCreate(){
var body = document.body,
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '2px solid black';
var n=5
for(var i =
浏览 1提问于2016-05-16得票数 1
1回答
我需要帮助在我的js文件中为时间表应用程序创建一个组合框？因此在时间表中有一个添加行按钮，它将创建一个新的行。我想有一个下拉+输入行中的第一列，这将列出客户。最初，时间表应用程序中没有用户需要添加行来提交时间表的行。点击添加行后，它将创建一个行，我希望在“项目代码”部分中有一个下拉列表，其中列出了内部时间表应用程序我们的客户。我用来创建表的JS代码如下： ? var arrHead = new Array(); // array for header.
arrHead = ['', 'Project Code', 'Project
浏览 18提问于2020-12-14得票数 1
我正在尝试从Chrome扩展修改表格的insertRow函数。
oldInsRowFunc = document.getElementById(id).insertRow;
document.getElementById(id).insertRow = fakeInsertRow;
// .......
function fakeInsertRow (ind) {
alert("fakeInsertRow called");
}
但是当它被调用时，调用的是本机函数，而不是fakeInsertRow。在其他情况下，如果我在javascript控制台中运行相同的代码，那么一
浏览 0提问于2012-01-08得票数 0
回答已采纳
我创建了一个包含20行2列的动态表。这是我的密码：
function createTblBtnClick() {
var tbl = document.createElement("table");
tbl.setAttribute("id", "myTable");
tbl.setAttribute("dir", "rtl");
tbl.cellPadding = 0;
tbl.cellSpacing = 0;
for (i = 0; i < rowN
浏览 5提问于2013-08-26得票数 0
回答已采纳
1回答
我正在尝试使用jspdf (类似于HTML5 )来转换表。但是，我的表中的元素是动态生成的。
function createTable(){
var reportDiv = document.getElementById('customers');
var table = document.createElement('table');
table.id = 'tab_customers';
table.className = 'table table-striped';
var thead
浏览 1提问于2014-10-01得票数 0
我在尝试根据输入(列/行)值动态生成HTML表时遇到了问题。
当我硬编码下面循环中的值时(即不使用提示符)，它会创建正确的单元格数。但是，当在循环中使用x.length时，有些东西不能正常工作。
正确工作：
函数createTable() {
// declare variables
var body = document.body,
table = document.createElement('table');
// Begin creating table
// for each row
for(var r =
浏览 0提问于2015-02-26得票数 0
for(i=0;i<11;i++)
{
table.insertRow(i);
var cell2 = table.rows[i].insertCell(-1);
var cell4 = document.createTextNode(i);
cell2.appendChild(cell4);
}
浏览 2提问于2013-11-20得票数 0
为了构建HTML表，我使用直接的DOM而不是预定义的Widget来设置and和tbody。但是，当我使用insertCell()方法插入一个单元格时，GWT插入了一个td元素，但应该插入一个th元素。
所以
TableElement table = Document.get().createTableElement();
TableSectionElement thead = table.createTHead();
TableRowElement headRow = thead.insertRow(-1);
headRow.insertCell(-1).setInnerText( "
浏览 0提问于2009-12-30得票数 4
3回答
以下是一个错误：
Uncaught :无法读取属性'appendChild‘的null
代码示例：
function MakeTable(Matrix){
var newElem = document.createElement('table');
newElem.border = "1px";
for(var j = 0; j < Matrix.length; j++) {
var newRow = newElem.insertRow(j);
for(var n = 0; n <
浏览 2提问于2015-05-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
