Using some JavaScript code you can achieve what you are trying to do. Here is one example but in this case I've changed the div Id rather than div name.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.changed {
background-color: gray;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border: 1px solid #ff0000;
}
#three {
background-color: #000;
color: #fff;
font-size: large;
border: 1px solid yellow;
width: 200px;
height: 200px;
padding: 5px 5px 5px 5px;
}
</style>
<script type="text/javascript">
function assignNewAttributes() {
document.getElementsByName('click1')[0].style.display = "inline";
var div = document.getElementById('one');
div.id = "two";
anotherOne();
}
function anotherOne() {
document.getElementsByName('click')[0].style.display = "none";
var elem = document.getElementById('two');
elem.innerHTML = "Changed content";
elem.className = 'changed';
}
function changeAttributes() {
var div = document.getElementById('two');
div.id = "three";
div.innerHTML = "Again changed the content.....";
document.getElementsByName('click1')[0].style.display = "none";
}
</script>
</head>
<body>
<div id="one" name="oneDiv">This is a test</div>
<input type="button" name="click" onclick="assignNewAttributes();" value="Assign New Properties" />
<input type="button" name="click1" onclick="changeAttributes();" value="Change It Again" style="display:none;" />
</body>
</html>
First click on Assign New Properties button after some time when you can view the changes in the above placed div block click on the second button.
* You can use a fully DOM based method for inputting the contents in the div element.
Junior Coders
Giving Two names to one DIV
Posting Permissions
Reply With Quote
Bookmarks