Question

我正在尝试从javascript编写div元素。我希望使用document.write（）：

编写如下的行

<div class="Square15px" onmouseover="changeColor('boxid')"></div>

我用以下函数调用写入div元素的函数：

<script type="text/javascript">
      colorPicker("box1");
 </script>

我尝试过document.write（）方法，以几种不同的方式构建字符串，例如：

function colorPicker(box) {
    var box = document.getElementById(box);
    var boxid = box.id;
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor("';
    var AquaStr2 = '")></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

我还尝试使用+作为concat运算符以多种不同方式分割字符串。字符串在boxid的末尾错误地构建。无论我如何编写代码块，我都得到相同的结果：

<div class="AquaSquare15px" onmouseover="changeColor(" box1?)=""/>

我似乎无法在这里看到我的错误，我已经查看了我能找到的所有帮助。除了引号和box1之间的空格，一切都是正确的，直到神秘的问号。我查看了IE9开发人员工具（F12）的结果。我不是一个经验丰富的程序员，所以我怀疑我错了。

Answer 1

我猜问题可能是引号。应该是：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';

此外，您不应使用新声明覆盖您的函数参数：

function colorPicker(box) {
    var box = document.getElementById(box);

而是使用其他名称，如

function colorPicker(boxid) {
    var box = document.getElementById(boxid);

话虽如此，通过id获取元素没有多大意义，之后阅读它的id：

var box = document.getElementById(box);
var boxid = box.id;

您已将ID作为函数参数。

建议结果：

function colorPicker(boxid) {
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
    var AquaStr2 = '\')"></div>';

    var AquaString = AquaStr1.concat(boxid, AquaStr2);
    document.writeln(AquaString);
}

正如其他人已经建议的那样，您不应该使用document.write。例如。使用jQuery代替看起来像这样：

$('body').append(AquaString);

Here is a demo.

Answer 2

您在属性值中使用引号而不对其进行HTML编码。此外，您缺少属性值的结束引号，因此结束标记和其他一些代码将最终位于属性中。

您可以转义引号：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(&quot;';
var AquaStr2 = '&quot;)"></div>';

或者你可以使用撇号，但是你需要在字符串中转义它们：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\'';
var AquaStr2 = '\')"></div>';

Answer 3

正如评论部分所指出：你不应该使用document.write。但是，你的字符串连接错了。试试这个：

function colorPicker(box) {
    var boxid = document.getElementById(box).id;
    var aquaStr = '<div class="AquaSquare15px" onmouseover="changeColor(\''+boxid+'\')"></div>';

    document.writeln(aquaStr);
}

使用Javascript document.write构建字符串

3 个答案: