在javascript中可以避免这一大块代码吗？

在前端方面做得不多，我想知道我所做的是否正确。
我已经创建了一个显示数据的

html

表。
我添加了按钮和复选框，以从结构上修改表，即添加一行。
执行此操作的代码是一大块代码，其功能如下：

var table = document.getElementById('table');  
table.insertRow(1);  

var id_td = document.createElement('td');  
//create options element  
id_td.appendChild(options);  

var name_td  = document.createElement('td');  
//create input textbox  
name_td.appendChild(txt_box);   

etc etc

因此，我不喜欢这样一个事实，即创建元素的代码实际上是一大块重复的代码。
我想知道，我走对了吗？除非我们使用像

JQuery

这样的库，否则这是唯一的方法吗？

VanillaJS方法 你可以用像

var table = document.getElementById('table');  
table.innerHTML = "<tr><td id="+id+"></td><td class="name"></tr>";

var table=document.getElementById（'table'）；
table.innerHTML=“”；

将标记添加为字符串，这样可能会更清晰。很难准确地说出来，而不知道你是如何重复自己的，但是你可以把它抽象成一个函数

图书馆 尽管有很多图书馆将这种丑陋抽象化了。jQuery就是其中之一，但类似的东西可能更适合您

它允许您定义数据模型，并通过自动更新将html模板绑定到该数据模型。因此，您可以将数据定义为JSON对象，并将其反映在DOM中，将来的更新只涉及视图模型对象，而不必处理DOM函数

我不喜欢这样一个事实，即创建元素的代码实际上是一大块重复的代码

为什么不为冗长的函数名创建别名呢

var gid = function (id) {return document.getElementById(id);}, // so short!
    ce = function (e) {return document.createElement(e)}, // ce(tag) is easy!
    td = function () {return ce('td');}, // td() now makes a new `<td>`
    ap = function (p, c) {return p.appendChild(c), p;}; // return more useful

---

这个神奇的表情符号是什么意思？

==

？.innerHTML在IE7之后的浏览器中用于表。innerHTML可能更容易。你也可以创建一个小函数…@dandavis：那么什么是跨浏览器解决方案呢？domapi太冗长了。非常冗长。您可以将一些操作包装到不太详细的函数中，但是如果您计划广泛使用jQuery，那么一定要使用它，因为它旨在消除DOM的冗长。如果您没有很多操作要执行，jQuery的开销通常是不合理的。例如，我创建一个td，创建一个

选择
并添加
选项
。附加到
td
和附加到
tr
。我创建一个
td
，创建一个
输入
文本，附加到
td
附加到
tr
。我创建一个
td
创建一个
选择
并添加
选项
。追加到
td
和追加到
tr
etcQuick注释，因为OP提到他们想要一个与IE7兼容的解决方案，所以您可以使用
innerHTML
，如果您使用HTML字符串制作整个表，那么它仍然与IE7兼容。这听起来像是在乞求一些模板，或者至少是一些辅助函数。如果你想保持它的简约，我只需要创建一个帮助函数来创建一个td和一个select。如果您想维护和发展这个项目，我建议您研究knockout或jQuery。对于这个特定的场景，我认为击倒是你想要的。@user2000008非常确定OP没有说任何关于IE7的内容：）哦，我明白了，作为对这个评论的回应。如果IE7支持是一个问题，那么是的，有解决办法。但最好集中精力解决一般情况，然后再考虑解决办法。如果他走了那条路，击倒/jQuery将回到IE6。
var table = gid('table'),
    row = table.insertRow(1);

var id_td = td(), options = ce('select');
ap(id_td, options);

var name_td  = td(), txt_box = ce('textarea');
ap(name_td, txt_box);

// etc etc