Change the contents of a div and activate or deactivate it

Question

Change the contents of a div and activate or deactivate it

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a div in HTML with a select and I want to call a function in JavaScript the content of this div change, after doing Several things in my JavaScript code. I want this select to disappear and a table appear that I will fill in with JavaScript to change the content.

Can I somehow have a div hidden with the table until deactivate the div with the select and activate the div with the table?

It would be to change the content of div with id=loggedin (the table that is in that div is not the one that I want to fill, that I use it to place the select ).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="loggedin">
	<div id="header">
		Logged in to as <span id="fullName"></span> 
		<a id="disconnect" href="#">Log Out</a>
	</div>
	<div id="output"> </div>
	<table id=tabla style="width:100%">
		<tr> </tr> <tr> <th> </th> </tr>  
		<tr> </tr> <tr> <th> </th> </tr>
		<tr>  
			<th>
				<select class="select" id="boards"></select>
			</th>   
		</tr>
	</table> 
	<span id="res"> nada</span>
	<span id="res2"> nada</span>
	<span id="res3"> nada</span>
</div>

javascript jquery html div

asked by Silvia 27.04.2018 в 18:47

source

2 answers

1

For a div to change dynamically by javascript you have to do the following:

document.getElementById("loggedin").html = "" //modifica todo el contenido dentro del div
document.getElementById("loggedin").html += "" //añade contenido dentro del div

answered by 27.04.2018 в 19:19

Take javascript id to php MySql order clause ORDER BY

score 1 · Accepted Answer

The style of DOM is usually handled with CSS , in your case you want to hide a div you can do it with:

<div id="none" style="display:none">div oculta con style="display:none"</div>
<div id="hide" style="visibility:hidden">div oculta con style="visibility:hidden"</div>

To show a div that is hidden you can do it with javascript :

function visible() {
 document.getElementById("none").style.display="";
 document.getElementById("hide").style.visibility="";
}

<div id="none" style="display:none">div oculta con style="display:none"</div>
<div id="hide" style="visibility:hidden">div oculta con style="visibility:hidden"</div>
<button onclick="visible()">Hacer visible</button>

To hide a div that is visible you can do it with javascript :

function ocultar() {
 document.getElementById("none").style.display="none";
 document.getElementById("hide").style.visibility="hidden";
}

<div id="none">puede ocultar con style="display:none"</div>
<div id="hide">o tambien con style="visibility:hidden"</div>
<button onclick="ocultar()">ocultar</button>

To change the content of a div you can do it with the property of the DOM : innerHTML

function cambiar() {
 document.getElementById("MyDiv").innerHTML= "Como estas? ;))...";
}

<div id="MyDiv">Hola Mundo!!</div>
<button onclick="cambiar()">Cambiar el Contenido de una DIV</button>

I hope this clarifies your doubts;)) ...