Javascript 使用按钮设置div的InnerHTML

所以我有一个div，它包含许多动态创建的按钮。 通过使用以下命令：

var s = document.getElementById("CancelColumn").innerHTML;
s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ;
document.getElementById("CancelColumn").innerHTML = s;

var s=document.getElementById（“CancelColumn”）.innerHTML；
s=s+“”；
document.getElementById（“CancelColumn”）.innerHTML=s；

但问题是，在firefox中，html显示如下：

<input class="CancelButt" type="button" SomeString",this)"="" onclick="deleteRow(" value="X"></input>

其中，值为“SomeString”

但在chrome中则有点不同。字符串有一个额外的空间，标记似乎无法正常工作。 这是：

我希望它显示以下内容：

其中“this”是调用函数的按钮

有什么建议吗？

试试这个

s = s+ "<input class='CancelButt' type='button' value='X' onclick='deleteRow('"+value+"',this)'>" ;

s=s+”；

试试这个

s = s+ "<input class='CancelButt' type='button' value='X' onclick='deleteRow('"+value+"',this)'>" ;

s=s+”；

更改您的

s=s+”

as

s=s+”更改您的
s=s+”；
as
s=s+”我不确定为什么会发生这种情况，但您还是应该改进代码。下面是一个改进代码的示例

var element = document.getElementById('CancelColumn');
    newInput = document.createElement('input');

newInput.type = 'button';
newInput.value = 'X';
newInput.className = 'CancelButt';
newInput.onclick = deleteRow.bind(null, value, newInput); // whatever value is?

element.appendChild(newInput);

它更加清晰易读，我并不奇怪您的代码会出现问题。
我不知道为什么会出现这种情况，但您还是应该改进代码。下面是一个改进代码的示例

var element = document.getElementById('CancelColumn');
    newInput = document.createElement('input');

newInput.type = 'button';
newInput.value = 'X';
newInput.className = 'CancelButt';
newInput.onclick = deleteRow.bind(null, value, newInput); // whatever value is?

element.appendChild(newInput);

它更加清晰易读，我并不奇怪您在使用现有代码时会遇到问题。
这样做似乎很不雅观

为什么不试试这个

var inp = document.createElement('input');
inp.setAttribute('class', 'CancelButt');
inp.setAttribute('type', 'button');
inp.setAttribute('value', 'X');
inp.onclick = deleteRow.bind(inp, 2, inp); // you don't really need to pass the 'this' value to the deleteRow function though

然后，您可以将
inp
附加到
#cancel列
似乎是一种不雅观的做法

为什么不试试这个

var inp = document.createElement('input');
inp.setAttribute('class', 'CancelButt');
inp.setAttribute('type', 'button');
inp.setAttribute('value', 'X');
inp.onclick = deleteRow.bind(inp, 2, inp); // you don't really need to pass the 'this' value to the deleteRow function though

然后您只需将
inp
附加到
#cancel列
如何：

s = s +  "<input class='CancelButt' type='button' value='X'
             onclick='deleteRow("+value+",this)'/>";

s=s+”；
这个怎么样：

s = s +  "<input class='CancelButt' type='button' value='X'
             onclick='deleteRow("+value+",this)'/>";

s=s+”；
我不确定我是否正确理解了你的问题。。。
是否希望有一个动态填充按钮的div，当您单击其中任何一个按钮时，它们将移动到另一个div

在这种情况下，我认为你的问题与这个问题类似：

来自Alejandro Illecas的回答：

移动：

jQuery（“#NodesToMove”）.detach（）.appendTo（“#DestinationContainerNode”）

复制：

jQuery（“#NodesToMove”）.appendTo（“#DestinationContainerNode”）

注意.detach（）使用。复制时请小心，不要复制id


JSFIDLE
我在这个中修改了他的解决方案，您可以看到，管理元素的移动不需要非常繁琐的脚本

jQuery
HTML
正如你在这里看到的，你也可以使用不同种类的元素

<div id="nonSelected">

   <!-- TWO INPUT TAGS --> 
   <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="Default" />
   <input id="btnPrimary" onclick="moveButton(this)" type="button" class="btn btn-primary" value="Primary" />

   <!-- THREE BUTTON TAGS -->
   <button id="btnDanger" onclick="moveButton(this)" type="button" class="btn btn-danger">Danger</button>
   <button id="btnWarning" onclick="moveButton(this)" type="button" class="btn btn-warning">Warning</button>
   <button id="btnSuccess" onclick="moveButton(this)" type="button" class="btn btn-success">Success</button>

</div>


<div id="selected">

</div>


危险
警告
成功
我不确定我是否正确理解了你的问题。。。
是否希望有一个动态填充按钮的div，当您单击其中任何一个按钮时，它们将移动到另一个div

在这种情况下，我认为你的问题与这个问题类似：

来自Alejandro Illecas的回答：

移动：

jQuery（“#NodesToMove”）.detach（）.appendTo（“#DestinationContainerNode”）

复制：

jQuery（“#NodesToMove”）.appendTo（“#DestinationContainerNode”）

注意.detach（）使用。复制时请小心，不要复制id


JSFIDLE
我在这个中修改了他的解决方案，您可以看到，管理元素的移动不需要非常繁琐的脚本

jQuery
HTML
正如你在这里看到的，你也可以使用不同种类的元素

<div id="nonSelected">

   <!-- TWO INPUT TAGS --> 
   <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="Default" />
   <input id="btnPrimary" onclick="moveButton(this)" type="button" class="btn btn-primary" value="Primary" />

   <!-- THREE BUTTON TAGS -->
   <button id="btnDanger" onclick="moveButton(this)" type="button" class="btn btn-danger">Danger</button>
   <button id="btnWarning" onclick="moveButton(this)" type="button" class="btn btn-warning">Warning</button>
   <button id="btnSuccess" onclick="moveButton(this)" type="button" class="btn btn-success">Success</button>

</div>


<div id="selected">

</div>


危险
警告
成功
重新思考您的
点击
@connorspiracist修复。感谢您指出这一点（尽管这是OP的
onclick
我只是让代码可读），重新思考您的
onclick
@connorspiracist已修复。感谢您指出这一点（尽管这是OP的
onclick
我只是让代码可读），谢谢，我不知道我可以这么做。您不是在用
null
参数覆盖调用上下文吗？@tewathia如果我没有设置
null
，该值将是
newInput
，因此使用
this
和
newInput
访问元素似乎毫无意义。当然，您可以将
null
更改为
newInput
谢谢，我不知道我可以这样做。您不是在用
null
参数覆盖调用上下文吗？@tewathia如果我没有设置
null
，该值将是
newInput
，因此使用
this
和
newInput
访问元素似乎毫无意义。当然，您可以将
null
更改为
newInput