how to show & and & in div using javascript

Question

rs25 0 Newbie Poster

14 Years Ago

Hi, I'm having some requirement where i need to show some value in div tags and latter parse it to save in database. the value which is html escape char are getting translated when in div thus making the input wrong. like some where i'm using & and < they got displayed as" &" html escape code. what i want is that what ever be inputed is show as it is like if < is a input only < is shows not < and vice-versa
presently when user enter < and < both displayed as < but value remain as < when accessed to any variable. what i want is that < and < both displayed and value assigned to variable remain as it is means < and <
i tried using innerHTML, but not able to solve it other things like innerText doesnot work with div so I'm bit stuck any help would be appreciated
Thanks
Rahul

javascript

Edited 14 Years Ago by rs25 because: further explanation

4 Contributors
13 Replies
192 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by rs25

All 13 Replies

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Rahul,

Here's a quick test which may help shed some light :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.wrapper {
	width: 340px;
}
.wrapper div {
	margin-bottom: 3px;
	padding: 5px;
	border: 1px solid #999;
}
.source {
	font-weight: bold;
}
.source span {
	color: #FFF;
	background-color: #006699;
}
.sink span {
	color: #FFF;
	background-color: #0099CC;
}
</style>

<script>
onload = function(){
	var test1a = document.getElementById('test1a');
	var test1b = document.getElementById('test1b');
	var test1c = document.getElementById('test1c');
	var test1d = document.getElementById('test1d');
	var test1e = document.getElementById('test1e');
	var test1f = document.getElementById('test1f');
	var test1g = document.getElementById('test1g');
	test1b.innerHTML = test1a.innerHTML;
	test1c.innerHTML = test1a.innerText;
	test1d.innerText = test1a.innerHTML;
	test1e.innerText = test1a.innerText;
	test1f.innerHTML = test1a.innerHTML.length;
	test1g.innerHTML = test1a.innerText.length;
};

</script>
</head>

<body>

<div class="wrapper">
	<div class="source"><span id="test1a">&</span>&nbsp;Source Character(s)</div><!-- edit contents of <span></span> to test different character(s) -->
	<div class="sink"><span id="test1b"></span>&nbsp;read with innerHTML; write with innerHTML</div>
	<div class="sink"><span id="test1c"></span>&nbsp;read with innerText; write with innerHTML</div>
	<div class="sink"><span id="test1d"></span>&nbsp;read with innerHTML; write with innerText</div>
	<div class="sink"><span id="test1e"></span>&nbsp;read with innerText; write with innerText</div>
	<div class="sink"><span id="test1f"></span>&nbsp;innerHTML.length</div>
	<div class="sink"><span id="test1g"></span>&nbsp;innerText.length</div>
</div>

</body>
</html>

The CSS is not important - it's just for layout/appearance.

Suggest you try it in different browsers in case there are differences.

Airshow

Edited 14 Years Ago by Airshow because: n/a

fxm 23 Posting Pro

14 Years Ago

Browser incompatibility: textContent vs. innerText.
Also, I think setting innerText obliterates all elements in innerHTML (not an issue here).

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Browser incompatibility: textContent vs. innerText.

Good point. Can you suggest a cross-browser solution to both read and write an element's innerText/textContent?

I suspect : reading - easy; writing - slightly harder.

Airshow

fxm 23 Posting Pro

14 Years Ago

simple example

Here are three functions that highlight the issues. The output of 'dataworks' and 'textworks' is different (which you can make clearer by replacing the space I used as a placeholder in each of the first four elements with a printing character). If you play around with 'datafails' you will have to test one element at a time because - obviously - those statements all fail when the element is empty :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <script type="text/javascript">

        function dataworks() {
            o1 = document.getElementById('1');
            o2 = document.getElementById('2');
            o3 = document.getElementById('3');
            o4 = document.getElementById('4');

            o1.firstChild.data = '&'
            o2.firstChild.data = '&amp;'
            o3.firstChild.data = '&'
            o4.firstChild.data = '&amp;'
        }

        function textworks() {
            o1 = document.getElementById('1');
            o2 = document.getElementById('2');
            o3 = document.getElementById('3');
            o4 = document.getElementById('4');
            o5 = document.getElementById('5');
            o6 = document.getElementById('6');
            o7 = document.getElementById('7');
            o8 = document.getElementById('8');

            o1.appendChild(document.createTextNode('&'));
            o2.appendChild(document.createTextNode('&amp;'));
            o3.appendChild(document.createTextNode('&'));
            o4.appendChild(document.createTextNode('&amp;'));
            o5.appendChild(document.createTextNode('&'));
            o5.appendChild(document.createTextNode('&amp;'));
            o7.appendChild(document.createTextNode('&'));
            o8.appendChild(document.createTextNode('&amp;'));
        }

        function datafails() {
            o5 = document.getElementById('5');
            o6 = document.getElementById('6');
            o7 = document.getElementById('7');
            o8 = document.getElementById('8');

            o5.firstChild.data = '&'
	  //	o6.firstChild.data = '&amp;'
	  //	o7.firstChild.data = '&'
	  //	o8.firstChild.data = '&amp;'
        }

    </script>
  </head>
  <body>
	<h2 id="1"> </h2>
	<h2 id="2"> </h2>
	<pre id="3"> </pre>
	<pre id="4"> </pre>

	<h2 id="5"></h2>
	<h2 id="6"></h2>
	<pre id="7"></pre>
	<pre id="8"></pre>

	<script type="text/javascript">
		dataworks();
	  //	datafails();
	  //	textworks();
	</script>

  </body>
</html>

I think this approach is infinitely preferable to

if(o.textContent){
      o.textContent = 'foo';
   }else{
      o.innerText = 'foo';
   }

rs25 commented: Great work. +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rs25 0 Newbie Poster · Answer 1 · 2010-04-20T18:22:11+00:00

Thanks for such an Effort. I'm going to try it, with my codes . will surely revert back how's it doing....
Thanks again.

rs25 0 Newbie Poster · Answer 2 · 2010-04-21T11:07:19+00:00

Hello Airshow ,

Only innerHTML is working fine. we are not able to write with innerText in Div and Span,and can not read from innerText as well (I'm using firefox 3.5).
In Chrome it works to some extent but not able to do what was expected. To get more clear on the context, take a Text box what ever entered in it can be show in alert as it is with innerText. I wish some work around would be there to Replicate this with Div or other Html tags.
Thanks
Rahul

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-04-21T14:07:09+00:00

Rahul,

I have very little time right now. Let's see if FXM comes back with a cross-browser solution.

Airshow

rs25 0 Newbie Poster · Answer 4 · 2010-04-21T15:15:37+00:00

Hi, No prob. One thing I wanted to know is " Whether its possible to get and put "&" and "&" in div tag. " without any replacement. just to get "What You See Is What You Get" philosophy. the way these chars are treated in Text Box by innerText.
Thanks.
Rahul

fxm 23 Posting Pro · Answer 5 · 2010-04-21T17:16:52+00:00

Good point. Can you suggest a cross-browser solution to both read and write an element's innerText/textContent?
I suspect : reading - easy; writing - slightly harder.
Airshow

The widely recommended work-around is a browser sniff [there are a number of easy ones]. They all looked so ugly in my code, however, that I switched to using the .data property (supported identically for both reading and writing by Safari/Firefox/Opera/Chrome/IE[all] on all elements for which it is defined). This approach has the added advantage that it is no longer necessary to remember [or, in my case, even learn] where to use (or avoid using) the .value/.nodeValue/.text properties.

There is a small quirk: for most elements .data='foo' fails if the element is empty at design time. Of course the real cure for that is .createTextNode() but the simple kluge of putting at least one space in the element at design time works just fine (with the sub-exception of <pre></pre> elements [and similar situations] in which whitespace matters).

rs25 0 Newbie Poster · Answer 6 · 2010-04-21T18:55:38+00:00

Hi, Sorry to bother you !, but can you through some light on how to use this any simple example, I'm really not getting it properly
Thanks for Helping out.
Rahul

rs25 0 Newbie Poster · Answer 7 · 2010-04-22T11:21:05+00:00

Thanks, Really Great. I'm now merging the things with my code to see how it works as of now standalone this is working exactly what i thought of. Thanks again.
Rahul
P.S- I tried it with .nodeValue and working as .data; is there any subtle difference in there and any web-link to get more similar details.

Christian Harms 0 Newbie Poster · Answer 8 · 2010-04-28T13:01:51+00:00

Hmmm do you have problems with the right transport encoding or reading from div? If first try a look on article on united-coders.com - some examples to understand when & ist & ...

rs25 0 Newbie Poster · Answer 9 · 2010-05-03T15:29:13+00:00

Yes That too is good.Earlier I could not find that page but on the main page i hardly understand how that has been achieved. As I'm still reading the other article by Matthias Will see how it work again. but you can explain a little bit on "how you are doing different from the solution provided".
Thanks for the interest. :)
Rahul

how to show & and &amp; in div using javascript

Recommended Answers Collapse Answers

All 13 Replies

how to show & and & in div using javascript

Recommended Answers