javascript:使用 getElementByID 填充多个 div

Question

有没有办法在客户端使用 javascript 将相同的内容写入页面上的多个 div 或多个点？

我有一个从数据库输出行的 php 脚本。要编辑内容，我想在每行之前插入一个复选框，就像 iPhone 编辑联系人一样，为了快速完成此操作，我尝试使用 javascript 使用 getElemenByID 在每行之前填充一个带有复选框的 div。

一个问题是一页上不能有多个同名的 div，因此我无法编写一次并让它填充多个同名的 div。如果我给 div 指定不同的名称，那么我必须多次写入，这没有吸引力，尤其是因为行数可能会有所不同。

作为一个相关问题，使用 javascript 插入的复选框是否可以工作？

这是无效代码:

js

function edit() }
var box = '<input type="checkbox name=num[]>';
var target = "checkbox";
document.getElementById(target).innerHTML = box;
return;
}//end function

html(由 PHP 从 dbase 生成)

<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit()";>edit</a>
<div id="checkbox"></div>Row1 contents<br>
<div id="checkbox"></div>Row2 contents<br>
<form type = "submit" value="Edit">
</form>

有谁知道一种方法来做到这一点，即显示可以选择提交的框？

非常感谢您的任何建议。

Answer 1

应该使用 PHP 生成，但是...

HTML

我猜您想使用 span 元素(而不是 div)作为复选框占位符，否则您将在一行上有一个复选框，然后在下面出现“第 1 行内容”复选框，而不是文本旁边的复选框。

[X]
Row 1 Contents

与(跨度)

[X] Row 1 Contents

 

<form action="edit.php" method="post" name="frmRows" id="frmRows">
    <a href="javascript:void(0)" onclick="edit()">edit</a>
    <span class="checkbox"></span>Row1 contents<br>
    <span class="checkbox"></span>Row2 contents<br>
    <input type = "submit" value="Edit">
</form>

JavaScript

除非绝对必要，否则不建议在 JavaScript 中使用 .innerHTML(并非所有浏览器都支持，并且有更好的方法来完成相同的任务。)

function edit() {
    var newCb;
    var i;
    var checkboxList = document.getElementsByClassName( 'checkbox' );

    for ( i = 0; i < checkboxList.length; i++ ) {

        newCb = document.createElement( 'input' ); // Create a new input element

        newCb.setAttribute( 'type', 'checkbox' ); // Set attributes for new element
        newCb.setAttribute( 'value', 'SomeValueHere' );
        newCb.setAttribute( 'name', 'checkboxName' );
        newCb.setAttribute( 'id', 'checkbox-' + i );

        checkboxList[i].appendChild( newCB ); // Add checkbox to span.checkbox
    }
}