Coding Challenge: Change innerText without changing its style.

**mwan0061** · 07-20-2006, 04:05 AM

How can we change some element's innerText without changing the innerText's style?
I need to do this:
There's a div on the page. Inside the div, there's just text, but with different fonts. E.g. aaaaaaaaaaaaaaabbbbbbbbbbccccccccccccc
And there's a input field, shows the content of the div. A user can change the stuff inside the input field then the div will change accordingly. Say if someone replace all the a's with d's, the div will appear as:
ddddddddddddddbbbbbbbbbbccccccccccccc
How can I make this happen?

**jscheuer1** · 07-20-2006, 06:13 AM

Only change the text.

**Twey** · 07-20-2006, 12:12 PM

Don't use innerText, it only exists in IE.

**jscheuer1** · 07-20-2006, 05:17 PM

I didn't think there was such a thing as innerText. Anyways, my suggestion should work, if you set a variable to the innerHTML of the overall containing element, then work whatever changes you wish upon it as a variable, and then assign it as the overall containing element's innerHTML.

**Twey** · 07-20-2006, 05:22 PM

This could be one of the rare situations where the DOM methods are simpler to use, if you wish to keep the fonts constant.

**jscheuer1** · 07-20-2006, 06:47 PM

Could be.

**jscheuer1** · 07-20-2006, 08:18 PM

As long as you do not delete or backspace over where the unseen font tags are. This works in IE and Opera9, not in FF:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#theTxt {
border:1px solid gray;
width:400px;
}
</style>
<script type="text/javascript">
function loadTxt(){
document.getElementById('theTxt').innerHTML=document.getElementById('theDiv').innerHTML//.replace(/<[^>]*>/g, '')
}
function loadDiv(){
document.getElementById('theDiv').innerHTML=document.getElementById('theTxt').innerHTML
}
onload=loadTxt;
</script>
</head>
<body>
<div id="theDiv"><font face="arial">aaaaaaaaaaaaaaa</font><font face="serif">bbbbbbbbbb</font><font face="arial">ccccccccccccc</font></div>
<div contenteditable id="theTxt"></div>
<input type="button" onclick="loadDiv()" value="Update">
</body>
</html>

**mwan0061** · 07-21-2006, 05:45 AM

Thanks heaps John! That works all fine. Thanks everyone for your time.

Thread: Coding Challenge: Change innerText without changing its style.

Thread Tools

Search Thread

Coding Challenge: Change innerText without changing its style.

Bookmarks

Bookmarks

Posting Permissions