Question

我在后面使用C＃定义了几个按钮。我怎么能在前面的Javascript中做到这一点？

click <a href=\"www.google.com\">here</a> to test

Answer 1

对于纯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);
});

此代码将创建10个按钮，由需要的按钮定义。它会将它们附加到ID为＆＃39; container＆＃39;的元素。请务必将其更改为您的实际元素。

编辑：

更新以反映@Andy建议使用文档片段来提高性能。

Answer 2

这可能会有所帮助

<h3 class="subtitle">Price Breakup</h3>

<table class="table" cellspacing="0">
  <tr class="">
    <td class="bold-heading">Component</td>
    <td class="bold-heading">Rate</td>
    <td class="bold-heading">Weight</td>
    <td class="bold-heading">Value</td>
  </tr>
  <tr>
    <td class="bold-heading">Gold - <span class="purity"></span>
    </td>
    <td id="gold_rate"></td>
    <td class="gold_weight"></td>
    <td id="gold_value"></td>
  </tr>
  <tr>
    <td class="bold-heading" colspan="4">Diamonds</td>
  </tr>
  <tr>
    <td class="td1">GH-VS Round - 36 Nos.</td>
    <td>Rs. 71,000/ct</td>
    <td>0.151 ct</td>
    <td>Rs. 10,721</td>
  </tr>
  <div id="diamond-comp">

    <!--Want it to appear like this:   <tr>
                                                <td ></td>
                                                <td>Rs. 71,000/ct</td>
                                                <td>0.151 ct</td>
                                                <td>Rs. 10,721</td>
                                            </tr> -->
  </div>
  <tr>
    <td class="bold-heading" colspan="2">Making Charges</td>
    <td></td>
    <td id="making-charges"></td>
  </tr>
  <tr>
    <td class="bold-heading" colspan="2">VAT</td>
    <td></td>
    <td id="vat"></td>
  </tr>
</table>

Answer 3

这可能会有所帮助：

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

Answer 4

您可以使用JQuery来操纵网站内容。

想象一下，你用div容器写了一个网站。只需使用jQuery.html方法直接修改此div的内容。

HTML：

<div id="container"></div>

JS：

$(document).ready(function () {
var html = "";
for (i = 0 ; i < 5 ; i++)
    html += "<button>Ein Button</button>";
$("#container").html(html);
});

Try this Demo

Answer 5

这样做：

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

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

5 个答案:

编辑：