NGa*_*bit 1 html javascript jquery dom
我正在尝试动态添加/删除DOM元素(id ="result").添加似乎工作正常,但删除后元素仍然出现在页面上.
这里发生了什么事？我究竟做错了什么？
这是我的代码:
<!DOCTYPE html>
<html>
<body>
<script>
function clearResult() {
if (document.getElementById("result") != null){
alert("remove #result");
$("#result").remove();
if (document.getElementById("result") != null) {
alert("#result still exists");
}
}
alert("Exiting clearResult");
}
function search() {
clearResult();
if (document.getElementById("result") == null) {
alert("add #result");
$('<table id="result"><tr>I am a table</tr></table>').appendTo('#ex');
}
}
</script>
<div>
<button id="search" onclick="search()" value="Send">Search</button>
</div>
<div id="ex">
@*Add result table here dynamically*@
</div>
</body>
</html>
您的HTML无效.表中的内容需要包含在td标签中.没有这些,您的代码将呈现为:
I am a table
<table id="result"><tr></tr></table>
您可以看到,然后删除#result元素似乎什么都不做,因为文本不会消失.如果您更改代码以包含td元素,它可以正常工作:
$('<table id="result"><tr><td>I am a table</td></tr></table>').appendTo('#ex');
请注意,您还可以大规模简化代码.在jQuery中删除之前,您不需要检查元素是否存在.此外,您应该使用jQuerys事件处理程序,而不是过时的on属性.试试这个:
<div>
<button id="search" value="Send">Search</button>
</div>
<div id="ex"></div>
$('#search').click(function() {
$('#ex').empty().append('<table id="result"><tr><td>I am a table</td></tr></table>');
});
我empty()在这里使用#ex元素来保存一个选择器,它具有相同的行为remove(),除了在元素的子元素上执行,而不是元素本身.
| 归档时间： |
|
| 查看次数： |
519 次 |
| 最近记录： |