-1

在我的以下代码中，我使用 java 脚本创建了一个 div。当我单击按钮时，div会重复显示。我应该怎么做才能显示一次并被清除。

 <html>
<head>
<title>Div tag using Javascript
</title>
<!--<link href="divtag1.js" type="text/javascript">-->
<style>
body{
    background:#00ffff;
}
.myclass{
    background:#30a0d3;
    color:#123456;
    position:relative;
    left:300px;
    right:300px;
    top:150px;
    height:100px;
    width:700px;
    border:2px solid #000000;
    border radius:5px;
    padding:20px;
    margin:50px;
}

</style>

<script>
function myfunction(){
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
var oldChild=element.removeChild(child)
element.removeChild(child);
}
</script>

</head>
<body>
<div>
<input type="button" value="Click Me!!" onclick="return myfunction();"></div>
</body>
</html>

任何建议都受到高度赞赏。

4

4 回答 4

1

给你创造div一个独一无二的id。这样，您可以使用that解析 DOM id，并正确删除它。

例子：

var mydiv = document.createElement("div");
mydiv.setAttribute("id", "deleteme");//set the ID to "deleteme"

现在您可以引用创建的 DIV，并使用它做您想做的事情（包括删除它）。

于 2013-11-08T07:31:37.837 回答
0 
<html>
<head>
<title>Div tag using Javascript
</title>
<!--<link href="divtag1.js" type="text/javascript">-->
<style>
body{
    background:#00ffff;
}
.myclass{
    background:#30a0d3;
    color:#123456;
    position:relative;
    left:300px;
    right:300px;
    top:150px;
    height:100px;
    width:700px;
    border:2px solid #000000;
    border radius:5px;
    padding:20px;
    margin:50px;
}

</style>

<script>
var once= false;
function myfunction(){
    if(once==true){
        return;
    }
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
once= true;
}
</script>

</head>
<body>
<div>
<input type="button" value="Click Me!!" onclick="return myfunction();"></div>
</body>
</html>
于 2013-11-08T07:36:57.870 回答
0

下面的代码是问题所在。孩子没有定义

var oldChild=element.removeChild(child)
element.removeChild(child);

您需要有一种方法来引用您插入的元素。如果你只是使用标准的 Javascript，也就是没有 jQuery，那么分配 id 是最好的选择。

于 2013-11-08T07:32:37.043 回答
0

为您使用 javascript 创建的 div 提供一些 id 并使用删除它

$('#yourdivid').html(''); // this will clear contents of your division
于 2013-11-08T07:33:07.450 回答