Test Page

Method 4: display error by adding text using createTextNode()

Code:

CSS:

#display2 {

position:absolute;

top:5px;

left:400px;

height:30px;

width:200px;

clip:rect(0px,0px,0px,0px);

border:1px dashed red;

text-align:center;

padding:5px;

background:#ffff00;

font-weight:bold;}

JavaScript:

<script>

function addError() {

var elem1 = document.getElementById("add1");

document.getElementById('add1').setAttribute("role", "alert");

document.getElementById('display2').style.clip='auto';
alertText = document.createTextNode("alert via createTextnode()");
elem1.appendChild(alertText);
elem1.style.display='none';
elem1.style.display='inline';

}


</script>

HTML:

<div id="display2" role="alert"><span id="add1"></span></div>


<input type="submit" value="Method 4 alert - display" onClick="addError()">