使用Javascript document.write构建字符串

String building with Javascript document.write

本文关键字：构建 字符串 write document Javascript 使用      更新时间：2023-09-26

我试图从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)的结果。我不是一个有经验的程序员，所以我怀疑我在某种程度上是错误的。

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

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

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

可以转义引号:

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

或者您可以使用撇号代替，但是您需要在字符串中转义它们:

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

我想问题可能是引号。应该是:

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);
相关文章：