使用按钮为div设置InnerHTML

Question

所以我有一个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;

问题是，在Firefox中，html显示为：

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

其中值为“SomeString”。

在Chrome中虽然有点不同。字符串有一个额外的空格，标签似乎没有正常工作。 这是：

我希望它显示以下内容：

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

有什么建议吗？

Answer 1

我不确定为什么会这样，但无论如何你应该改进你的代码。以下是改进代码的示例。

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);

它更清晰，更易读，我对您遇到的代码问题并不感到惊讶。

Answer 2

看起来像这样一种不太优雅的方式

为什么不尝试这个？

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附加到#CancelColumn

即可

Answer 3

试试这个

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

Answer 4

将s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ;更改为s = s+ "<input class='CancelButt' type= 'button' value='x' onclick='deleteRow('+value+',this)\'">" ;

Answer 5

这个怎么样：

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

Answer 6

我不确定我是否正确理解你的问题...... 你想要一个你用按钮动态填充的div，当你点击任何这些按钮时，它们会移动到另一个div吗？

在这种情况下，我认为您的问题与此问题类似 - How to move an element into another element?

来自Alejandro Illecas回答：

  

<强> MOVE：

     

的jQuery（ “＃NodesToMove”）。分离（）。appendTo（ '＃DestinationContainerNode'）

     

复制

     

的jQuery（ “＃NodesToMove”）。appendTo（ '＃DestinationContainerNode'）

     

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

---

的jsfiddle

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

的jQuery

function moveButton(elem){
   if( $(elem).parent().attr("id") == "nonSelected" ){
      $(elem).detach().appendTo('#selected');
   }
   else{
      $(elem).detach().appendTo('#nonSelected'); 
   }
}

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>