从PHP到JS的变化

我的问题可能是基本的，我只是缺乏技能。 如何将以下代码转换为javascript

    <?php
    for($i=1; $i<10; $i++){
        echo "<input type='text' placeholder='Word' name='word$i' /><br />";
    }
    ?>

试试看

好的，您创建了一个按钮，请在其上写一个onclick事件，然后触发一个函数
这样，还可以创建一个主div，在其中添加元素

<input type="button" onclick="getElement();"/>
<di id="main"></div>



在函数getElement中，请编写以下代码：

var i=1;
function getElement(){
var str = "<input type='text' placeholder='Word' name='word"+i+"' />";
i++;
document.getElementById('main').innerHTML = str;
}

var i=1；
函数getElement（）{
var str=“”；
i++；
document.getElementById（'main'）.innerHTML=str；
}
用于（变量i=0；i<10；i++）{
var input=document.createElement（'input'）；
input.setAttribute（'type'，'text'）；
setAttribute（'placeholder'，'Word'）；
input.setAttribute（'name'，'word'+i）；
}

类似这样的东西？
在Chrome中测试

<input type="button" value="Magical pony time!" onclick="clickhandler()" />

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

<script type="text/javascript">
    // contains the counter for elements added
    window.__buttonClickCounter = 0; 

    // Keep reference to container
   var c = document.getElementById('container');

    // Click handler that appends to the contents of the container
    var clickhandler = function() {
        c.innerHTML = c.innerHTML + "<input type='text' placeholder='Word' name='word"+window.__buttonClickCounter+"' value="+window.__buttonClickCounter+" /><br />";
        window.__buttonClickCounter++;
    }
</script>


//包含已添加元素的计数器
窗口。u_按钮ICKCounter=0；
//保持对容器的引用
var c=document.getElementById（'container'）；
//单击附加到容器内容的处理程序
var clickhandler=函数（）{
c、 innerHTML=c.innerHTML+“
”；
窗口。_按钮ICKCounter++；
}
您想要纯javascript还是jquery？请注意，PHP是在服务器端执行的，而JavaScript是在客户端执行的。使用JavaScript，您的最终结果似乎非常可行（实际上是基本的），但输出顺序将不一样。
for (var i = 0; i < 10; i++) {
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('placeholder', 'Word');
  input.setAttribute('name', 'word' + i);
}

<input type="button" value="Magical pony time!" onclick="clickhandler()" />

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

<script type="text/javascript">
    // contains the counter for elements added
    window.__buttonClickCounter = 0; 

    // Keep reference to container
   var c = document.getElementById('container');

    // Click handler that appends to the contents of the container
    var clickhandler = function() {
        c.innerHTML = c.innerHTML + "<input type='text' placeholder='Word' name='word"+window.__buttonClickCounter+"' value="+window.__buttonClickCounter+" /><br />";
        window.__buttonClickCounter++;
    }
</script>