开发者

How do you remove and hide HTML elements in plain Javascript?

开发者 https://www.devze.com 2023-04-06 03:11 出处:网络
I have this HTML: <body> <div id=\"content-container\" style=\"display:none\"> <div>John</div>

I have this HTML:

<body>
    <div id="content-container" style="display:none">
         <div>John</div>
    </div>
    <div id="verifying">
         <div id="message">Verified</div>
    </div>
</body>

And this Javascript:

var body = document.body;
var signup = document.getElementById("content-container");

setTimeout(function(){
    body.re开发者_JAVA百科moveChild('verifying');
    signup.style.display = "block";
}, 5000);

I am trying to remove <div id="verifying"> and show <div id="content-container"> after 5 seconds, but for some reason it is not working. Any idea why? I am loading the script after the page loads so that is not the problem.


You need to pass an element reference to removeChild, not a string:

body.removeChild(document.getElementById('verifying'));

You could also just hide it:

document.getElementById('verifying').style.display = "none";


your removeChild needs to get an element, not a string

var body = document.body;
var signup = document.getElementById("content-container");

setTimeout(function(){
    body.removeChild(document.getElementById('verifying'));
    signup.style.display = "block";
}, 5000);


to remove you can use (as stated) removeChild:

var x = document.getElementById('elementid');
x.parentNode.removeChild(x);

And to hide an element:

var x = document.getElementById('elementid');
x.style.display="none";

EDIT:

oh and if you want it hidden but not taken "out of flow", use this:

var x = document.getElementById('elementid');
x.style.visibility="hidden";
0

精彩评论

暂无评论...
验证码 换一张
取 消