Forum Moderators: open
The line 'text1 <br/> text2' will actually be generated from a db and I'm using CSS (can't use frames or tables).
---------------------------------------
<title>What to do?</title>
<script language="JavaScript">
function swapElements(tPara)
{
var displayP1 = document.getElementById("para1");
displayP1.firstChild.nodeValue=tPara;
}
</script>
<a href="javascript:swapElements('text1 <br/> text2')"> Link </a>
<p id="para1">Replace this text</p>
----------------------------------------------
What I get when I click the link is...
text1 <br/> text2
What I want is...
text1
text2
I've tried
var displayP1 = document.getElementById("para1").innerHtml;
and
displayP1.innerHtml.firstChild.nodeValue=tPara;
etc. etc. with no sucess. Any Ideas? Thank you in advance...
innerHTML (the capitalization is critical) is a separate way of changing the contents of an element. As a quick 'n' dirty example, try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
textarea{height:12em;width:100%;}
#divOne{width:98%;background:#eec;margin:0;padding:0;}
#divTwo{background:#cee;}
#divThree{background:#fdd;}
div.fl{float:left;width:41%;height:100%;margin:0;padding:4%;}
</style>
<script type="text/javascript">
function transText(ta_val){
var lns_arr=ta_val.split("\n");
var la_ln=lns_arr.length;
var wr_str="";
for(var i=0;i<la_ln;i++){
lns_arr[i]!=""&&lns_arr[i]!="\r"?wr_str+="<div>"+lns_arr[i]+"<\/div>":wr_str+="<div> <br \/><\/div>";
}
document.getElementById("divTwo").innerHTML=wr_str;var txtDivs=document.createElement("div");
var targDiv=document.getElementById("divThree");
var trans=targDiv.firstChild;
var rt=document.createElement("br");
for(var i=0;i<la_ln;i++){
var oneDiv=document.createElement("div");
lns_arr[i]!=""&&lns_arr[i]!="\r"?oneDiv.appendChild(document.createTextNode(lns_arr[i])) :oneDiv.appendChild(rt);
txtDivs.appendChild(oneDiv);
}
targDiv.replaceChild(txtDivs,trans);
}</script>
</head>
<body>
<div id="divOne">
<form action="">
<textarea onblur="transText(this.value);">Some <br /><b>text</b> <br />in a textarea. </textarea>
</form>
</div>
<div id="divTwo" class="fl" style="border-right:6px solid groove;"></div>
<div id="divThree" class="fl" style="border-left:6px solid groove;">
<span></span><!-- a child to keep IE happy that a firstChild exists -->
</div>
</body>
</html>
