我需要创建和删除html元素

时间:2016-02-23 16:12:53

标签: javascript

我需要创建和删除html元素,但删除功能不起作用。

<script>
function addElement() {

  var ni = document.getElementById('myDiv');

  var numi = document.getElementById('theValue');

  var num = (document.getElementById('theValue').value -1)+ 2;

      numi.value = num;

  var newdiv = document.createElement('div');

  var divIdName = 'my'+num+'Div';

  newdiv.setAttribute('id',divIdName);

  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href="#\" onclick="removeElement('+divIdName+')">Remove the div  '+divIdName+' </a>';

  ni.appendChild(newdiv);

}
function removeElement(divNum) {

  var d = document.getElementById('myDiv');

  var olddiv = document.getElementById(divNum);

  d.removeChild(olddiv);

}
</script>


<input type="hidden" value="0" id="theValue" />

<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>

<div id="myDiv"> </div>

我真的试过了。

1 个答案:

答案 0 :(得分:1)

你必须将参数包装在引号中,因为它是一个字符串。

newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\"#\" onclick="removeElement(\''+divIdName+'\')">Remove the div  '+divIdName+' </a>';

以下是工作代码段

function addElement() {

  var ni = document.getElementById('myDiv');

  var numi = document.getElementById('theValue');

  var num = (document.getElementById('theValue').value -1)+ 2;

      numi.value = num;

  var newdiv = document.createElement('div');

  var divIdName = 'my'+num+'Div';

  newdiv.setAttribute('id',divIdName);

  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\"#\" onclick="removeElement(\''+divIdName+'\')">Remove the div  '+divIdName+' </a>';

  ni.appendChild(newdiv);

}
function removeElement(divNum) {

  var d = document.getElementById('myDiv');

  var olddiv = document.getElementById(divNum);

  d.removeChild(olddiv);

}
<input type="hidden" value="0" id="theValue" />

<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>

<div id="myDiv"> </div>