使用javascript添加html

我需要在用户输入/选择时向表中添加行。无法使用jQuery，Mootools 1.3.2正常

我有一个

字段，

onchange

运行函数add\u copy

html是（）

要复印什么？
测试1
测试2

不起作用的脚本是：

var copy_counter = 0;

function add_copy() {
copy_counter = copy_counter + 1;
var addition_text = document.getElementById('copy_selected').options[document.getElementById('copy_selected').selectedIndex].text;
var addition_id = document.getElementById("copy_selected").value;
new_addition = '<td></td>' + '<td></td>' + '</tr><tr>' + 
    '<td class="side">' + document.getElementById("copy_settings_desc").innerHTML + '</td>' +
    '<td>' + addition_text + 
    '<input type="hidden" name="copy_to[copy_counter]" value=' + addition_id + '>' +
    '</td>';
document.getElementById("copy_expandable").innerHTML = document.getElementById("copy_expandable").innerHTML + new_addition;
}

var copy\u计数器=0；
函数add_copy（）{
复制计数器=复制计数器+1；
var addition_text=document.getElementById（'copy_selected'）。选项[document.getElementById（'copy_selected'）。selectedIndex]。文本；
var addition_id=document.getElementById（“复制所选”）.value；
新添加=“”+“”+“”
''+document.getElementById（“复制设置”）.innerHTML+''+
''+添加内容\u文本+
'' +
'';
document.getElementById（“copy\u expandable”）.innerHTML=document.getElementById（“copy\u expandable”）.innerHTML+new\u addition；
}

我理解用脚本编写html不是一个好的实践。（在这种情况下，甚至不起作用）

这样做的好方法是什么？多谢各位

---

编辑：修复了连接（感谢您指出这一点）。您是否注意到在每个新的选择中都忽略了

行？为什么？

您的问题是，您在定义HTML字符串时出现语法错误（它们没有很好地连接），您的小提琴是否已更新并正常工作

JS中的字符串不能在多行上，您必须使用

+

运算符来连接它们，或者您甚至可以使用

\

来定义多行字符串，这是一个示例：

var myString = 'this is\
                a string\
                on multiple line!';

---

编辑：根据您的要求，您的代码可以正常工作。我更改了表的id，这样您就可以在HTML结束之前使用

元素.insertAdjacentHTML（）

附加HTML。您的代码样式有点改变，但我认为这是您想要的，所以请查看

您的问题是，您在定义HTML字符串时出现语法错误（它们没有很好地连接），您的小提琴是否已更新并正常工作

JS中的字符串不能在多行上，您必须使用

+

运算符来连接它们，或者您甚至可以使用

\

来定义多行字符串，这是一个示例：

var myString = 'this is\
                a string\
                on multiple line!';

---

编辑：根据您的要求，您的代码可以正常工作。我更改了表的id，这样您就可以在HTML结束之前使用

元素.insertAdjacentHTML（）

附加HTML。您的代码样式有点改变，但我认为这是您想要的，所以请查看

更改了脚本，现在可以使用了：
在连接字符串时要更加小心。然后查看控制台，了解脚本中是否存在任何错误。
如果您正在寻找脚本中的多行字符串，请考虑编写这样的代码：

var multiline = "i\
                 have two lines"

---

更改了脚本，现在可以使用了：
在连接字符串时要更加小心。然后查看控制台，了解脚本中是否存在任何错误。
如果您正在寻找脚本中的多行字符串，请考虑编写这样的代码：

var multiline = "i\
                 have two lines"

---

当您想要创建元素时，最好不要附加HTML代码本身。相反，您应该使用JavaScript函数，并让它为您操作DOM

在您的特定情况下，可以通过、和其他功能的组合来创建新行和单元格：

var table = document.getElementById('myTable'); // get table
var row = table.insertRow(table.rows.length); // insert row at the end

var cellA = row.insertCell(0); // create cell
var textA = document.createTextNode('<p>text</p> A'); // <p> will not render as
cellA.appendChild(textA);                             // HTML, but as if it were
                                                      // escaped text like &gt;
var cellB = row.insertCell(1);
var textB = document.createTextNode('text for column B');
cellB.appendChild(textB);

var myInput = document.createElement("input"); // create <input>
myInput.type = "text";                         // set input's attributes
myInput.name = "myInput";
myInput.value = 'my DOM created Input';
cellB.appendChild(myInput);                    // appends <input> to cell

var table=document.getElementById（'myTable'）；//拿桌子
var row=table.insertRow（table.rows.length）；//在末尾插入行
var cellA=row.insertCell（0）；//创建单元
var textA=document.createTextNode（'text
A'）；// 不会呈现为
cellA.appendChild（textA）；//HTML，但好像是
//类转义文本
var cellB=行插入单元格（1）；
var textB=document.createTextNode（'text for column B'）；
单元b.附加子单元（textB）；
var myInput=document.createElement（“输入”）；//创造
myInput.type=“text”//设置输入的属性
myInput.name=“myInput”；
myInput.value='MyDOM创建的输入'；
cellB.appendChild（myInput）；//附加到单元格

---

这是非常简单和万无一失的。当您想要创建元素时，最好不要附加HTML代码本身。相反，您应该使用JavaScript函数，并让它为您操作DOM

在您的特定情况下，可以通过、和其他功能的组合来创建新行和单元格：

var table = document.getElementById('myTable'); // get table
var row = table.insertRow(table.rows.length); // insert row at the end

var cellA = row.insertCell(0); // create cell
var textA = document.createTextNode('<p>text</p> A'); // <p> will not render as
cellA.appendChild(textA);                             // HTML, but as if it were
                                                      // escaped text like &gt;
var cellB = row.insertCell(1);
var textB = document.createTextNode('text for column B');
cellB.appendChild(textB);

var myInput = document.createElement("input"); // create <input>
myInput.type = "text";                         // set input's attributes
myInput.name = "myInput";
myInput.value = 'my DOM created Input';
cellB.appendChild(myInput);                    // appends <input> to cell

var table=document.getElementById（'myTable'）；//拿桌子
var row=table.insertRow（table.rows.length）；//在末尾插入行
var cellA=row.insertCell（0）；//创建单元
var textA=document.createTextNode（'text
A'）；// 不会呈现为
cellA.appendChild（textA）；//HTML，但好像是
//类转义文本
var cellB=行插入单元格（1）；
var textB=document.createTextNode（'text for column B'）；
单元b.附加子单元（textB）；
var myInput=document.createElement（“输入”）；//创造
myInput.type=“text”//设置输入的属性
myInput.name=“myInput”；
myInput.value='MyDOM创建的输入'；
cellB.appendChild（myInput）；//附加到单元格

---

这是非常简单和万无一失的。您的代码中的一部分使用了此功能。

嗯，您没有正确连接。。。尝试使用LINT或console调试代码，您应该会看到一个错误。嗯，您没有正确连接。。。尝试使用LINT代码或console调试，您应该会看到错误。感谢您查看我的问题。是的，你说得对，我的JS技能有限。您的小提琴没有按我预期的那样工作，您是否注意到在每个新选择上都忽略了

行？为什么？更新了！现在就去看看，太棒了！感谢您抽出时间参加chec