如何使用Javascript for循环创建按钮

我在后面用C#定义了几个按钮。如何在前面的Javascript中实现这一点

for (int r = 0; r < data.Count; r++)
{
    var buttonField = new ButtonField
    {
        ButtonType = ButtonType.Button,
        Text = "Button",
        CommandName = "Display",                
    };
    break;
}

for（int r=0；r

您可以使用JQuery操作网站内容

假设您使用div容器编写了一个网站。只需使用jQuery.html方法直接修改这个div的内容

HTML:

JS:

$（文档）.ready（函数（）{
var html=“”；
对于（i=0；i<5；i++）
html+=“Ein按钮”；
$（“#容器”）.html（html）；
});

---

对于纯javascript方法，不使用jquery

document.addEventListener("DOMContentLoaded", function(event) { 
  var buttonsWanted = 10;
  var doc = document;
  var docFrag = document.createDocumentFragment();

  for(var x = 0; x < buttonsWanted; x++){
    var button = doc.createElement('button');
    button.setAttribute('text', 'yourtext');
    docFrag.appendChild(button);
  }

  doc.getElementById('container').appendChild(docFrag);
});

document.addEventListener（“DOMContentLoaded”，函数（事件）{
var=10；
var doc=单据；
var docFrag=document.createDocumentFragment（）；
对于（变量x=0；x

此代码将创建10个按钮，如所需按钮所定义。它会将它们附加到ID为“container”的元素中。确保将其更改为实际元素

编辑： 更新以反映@Andy关于使用文档片段提高性能的建议。

这可能会有所帮助

var docFrag = document.createDocumentFragment();
for (var i=0; i < 5 ; i++){
     var elem = document.createElement('input');
     elem.type = 'button';
     elem.value = 'button';
     docFrag.appendChild(elem);
}
document.body.appendChild(docFrag);

var docFrag=document.createDocumentFragment（）；
对于（变量i=0；i<5；i++）{
var elem=document.createElement（'input'）；
元素类型='按钮'；
元素值='按钮'；
文件附件（elem）；
}
文件.正文.附件（docFrag）；

这样做可以：

var d = document.createDocumentFragment();
for(var i = 1; i <= 10 ; i++){
    var element = document.createElement("input");
    element.type  = "button";
    element.value = 'button' + i;
    d.appendChild(element);
}
document.body.appendChild(d);

var d=document.createDocumentFragment（）；
对于（var i=1；i这可能会有帮助：

          for (i=0; i < 5 ; i++){
                var element = document.createElement("input");
                //Assign different attributes to the element. 
                element.setAttribute("type", type);
                element.setAttribute("value", type);
                element.setAttribute("name", type);
                //element.setAttribute("onclick", ); If you wish to add click event

                //Append the element in page (in span).  
               document.body.appendChild(element);
          }

（i=0；i<5；i++）的
{
var元素=document.createElement（“输入”）；
//为元素指定不同的属性。
setAttribute（“类型”，类型）；
setAttribute（“值”，类型）；
setAttribute（“名称”，类型）；
//element.setAttribute（“onclick”），如果要添加click事件
//在页面中追加元素（在span中）。
document.body.appendChild（元素）；
}
1）从学习一些基本的JavaScript开始。2） 写一些代码，看看它是否有效3）如果不起作用，请在这里用您编写的代码发布一个问题，我们将尽最大努力帮助您。4） 阅读了解如何提出一个好问题。Stackoverflow不是一种编码服务。这是一种非常低效的方式。您应该创建一个docfragment，将所有按钮添加到其中，然后将该片段附加到DOM。@andy啊，我没有想到这一点，不知道如何创建docfragment。谢谢你的提示，我会留意的@安迪-你好像知道。如果这样的答案可能弊大于利，那么删除它是否值得？取决于您。我可能会更新答案。我也不是第一次就把事情做好的。：）请看Mahesh Durairaj在我指出docfrag后对他如何实施docfrag的回答。这是一种非常低效的方法。您应该创建一个docfragment，将所有按钮添加到该docfragment，然后将该片段附加到DOM。谢谢Mahesh，它工作得非常完美@Tong，那么你应该把这个答案标记为正确的。这是我首先更新的，也是我个人赞同的。旁注：在循环之外定义
I
是毫无意义的，大多数人习惯于在for（）语句中看到这个定义。您还将
文档
存储在
文档
中，但随后立即不使用它。同样，这是一种非常低效的方法。你应该创建一个docfragment，添加所有的按钮，然后将该片段附加到DOM.Tong，在你可以选择的所有答案中，这个不是最好的。看我的评论。谢谢保罗，它工作得很好@安迪，你的解决方案在哪里？谢谢我还需要在这个循环中写入onclick函数。但是，此按钮将触发两个功能。“我怎么能这么做？”童，我没有写。我要指出的是，这不是一个有效的解决方案，而其他答案是。第二，这仍然是基本的JS。去读一些教程。
var d = document.createDocumentFragment();
for(var i = 1; i <= 10 ; i++){
    var element = document.createElement("input");
    element.type  = "button";
    element.value = 'button' + i;
    d.appendChild(element);
}
document.body.appendChild(d);

          for (i=0; i < 5 ; i++){
                var element = document.createElement("input");
                //Assign different attributes to the element. 
                element.setAttribute("type", type);
                element.setAttribute("value", type);
                element.setAttribute("name", type);
                //element.setAttribute("onclick", ); If you wish to add click event

                //Append the element in page (in span).  
               document.body.appendChild(element);
          }