By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,983 Members | 1,717 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,983 IT Pros & Developers. It's quick & easy.

How to display a html link in container?

P: 24
I have four records in a file and one of them contains a link like <a href = "http://steelers.com">Pittsburgh Steelers</a> win again.

I am reading the records and storing them in a container called div1 The problem is that I want the Pittsburgh Steelers words above to show up as an actual link when they are added to the div1. Right now the link is showing up just like it is in the file. I am using javascript and innerHTML.

The four records are appended to a variable called dataIN. Then the last statement is document.getElementByID('div1').innerhtml += dataIN.

I want to store Pittsburgh Steelers win again in the container instead of actual text version
<a href = "http://steelers.com">Pittsburgh Steelers</a> win again
Mar 23 '15 #1

✓ answered by Rabbit

I think I would lean towards innerHTML as well and unescaping it. It's more likely to work with every browser.

Let us know if you have trouble unescaping the HTML.

Share this Question
Share on Google+
29 Replies


Rabbit
Expert Mod 10K+
P: 12,364
Works fine for me.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function test() {
  5.                 document.getElementById('div1').innerHTML += " <a href = 'http://steelers.com'>Pittsburgh Steelers</a> win again";
  6.             }
  7.         </script>
  8.     </head>
  9.  
  10.     <body onload="test()">
  11.         <div id="div1">test</div>
  12.     </body>
  13. </html>
There's probably something else in your code that is wrong. You would need to post it.
Mar 23 '15 #2

P: 24
Yes I can easily do it that way myself. I have done that. The problem is that the <a href = 'http://steelers.com'>Pittsburgh Steelers</a> win again";
is inside a file.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function LoadFile() {
  3.     var oFrame = document.getElementById("frmFile");
  4.     var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
  5.     while (strRawContents.indexOf("\r") >= 0)
  6.         strRawContents = strRawContents.replace("\r", "");
  7.     var arrLines = strRawContents.split("\n");
  8.     //alert("File " + oFrame.src + " has " + arrLines.length + " lines");
  9.     var html='';
  10.     for (var i = 0; i < arrLines.length; i++) {
  11.         var curLine = arrLines[i];
  12.  
  13. if(curLine.search("href") > -1)
  14. {
  15. var divP1 = '<div>';
  16. var divP2 = '</div>';
  17. var tLine = curLine;
  18. var cat1 = divP1.concat(curLine);
  19. cat2 = cat1.concat(divP2);
  20. //curLine = cat2.replace(/</g,'&lt;').replace(/>/g,'&gt;');
  21. curLine = htmlEscape(curLine);
  22. document.getElementById('div1').href = curLine;
  23. //        html += curLine + '<br />';
  24. //curLine = divP1.concat(tLine);
  25. //document.getElementById('div1').innerHTML = '<div><a href="http://www.steelers.com">Steelers</a></div>';
  26. //document.getElementById('div1').innerHTML = cat2;;
  27. }
  28.         html += curLine + '<br />';
  29.         //alert("Line #" + (i + 1) + " is: '" + curLine + "'");
  30.     }
  31. //    html = html.replace(/</g,'&lt;').replace(/>/g,'&gt;');
  32.     document.getElementById('div1').innerHTML+= html;
  33. }
  34. </script>
*************************
Input File
This is line 1.
This is line 2.
This is line 3.
<a href="http://steelers.com">Pittsburgh Steelers</a>
************************************************** ***
Results inside div1
Same as the 4 lines above.
Mar 23 '15 #3

P: 24
Here is the iframe and div

Expand|Select|Wrap|Line Numbers
  1. <iframe id="frmFile" src="
  2. http://mtcsrv1078/sites/BOOST/MainTest/Shared Documents/demo_test.txt" onload="LoadFile();" style="display: none;"></iframe>
  3.  
  4.     <div class="m2">
  5.  <div id = "div1"></div>
  6.  
  7. </div>
  8.  
  9. </div>
Mar 23 '15 #4

P: 24
So even though html is a string variable, I am trying to convert incoming strings that contain an href to html and add it to the innerHTML as well as regular strings.
Mar 23 '15 #5

Rabbit
Expert Mod 10K+
P: 12,364
This line:
Expand|Select|Wrap|Line Numbers
  1. curLine = htmlEscape(curLine);
You are escaping HTML.
Mar 23 '15 #6

P: 24
Thanks Rabbit for your response. I'll keep playing with it to see what happens. Line 25 above is basically doing the same thing you are doing. I want user to be able to edit the text file at any time and each time an edit is made, the div will update as well with the additional text. So sometimes they may put href or other html tags in the text file.
Mar 23 '15 #7

Rabbit
Expert Mod 10K+
P: 12,364
No it's not the same thing I am doing. I never escape the HTML.

If you escape the HTML in my string above, then it would be what you're doing. Escaping HTML takes HTML strings and makes it not HTML.
Mar 23 '15 #8

P: 24
//document.getElementById('div1').innerHTML = '<div><a href="http://www.steelers.com">Steelers</a></div>';
Mar 23 '15 #9

P: 24
That's the line I am referring to, not the escape line.
Mar 23 '15 #10

P: 24
Even without the escape line it still does the same thing. I was just trying something with the escape.
Mar 23 '15 #11

P: 24
Even if I try to use replace, it just puts the following in the container.

&lt;a href="http://steelers.com"&gt; Pittsburg Steelers&lt;/a&gt;
Mar 23 '15 #12

Rabbit
Expert Mod 10K+
P: 12,364
That line is commented out so it doesn't do anything.
Mar 23 '15 #13

P: 24
I know that. I'm the one who commented it out. As mentioned I can get it to work that way: the way the commented out line is doing. Once again I am trying to read lines(some containing html tags) from a file and add it to the div.
Mar 23 '15 #14

P: 24
Thanks for your help. I'll fix it I'm sure.
Mar 23 '15 #15

Rabbit
Expert Mod 10K+
P: 12,364
It would really help to see the code that you are actually running...

The problem is that something is escaping the HTML. Your code has a function that escaptes HTML. That was the most obvious answer.

Now that I know you aren't actually using that function and you were just showing me test code and not the actual code you were running, I investigated further.

The issue is line 4. By then, the HTML has already been escaped. What you need to do then is to unescape the HTML.
Mar 23 '15 #16

P: 24
What do you mean the actual code? This the actual code from the site. If it helps below I have take out all comments and copied it again here.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function LoadFile() {
  3.     var oFrame = document.getElementById("frmFile");
  4.     var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
  5.     while (strRawContents.indexOf("\r") >= 0)
  6.         strRawContents = strRawContents.replace("\r", "");
  7.     var arrLines = strRawContents.split("\n");
  8.     var html='';
  9.     for (var i = 0; i < arrLines.length; i++) {
  10.         var curLine = arrLines[i];
  11.  
  12. if(curLine.search("href") > -1)
  13. {
  14. var divP1 = '<div>';
  15. var divP2 = '</div>';
  16. var tLine = curLine;
  17. var cat1 = divP1.concat(curLine);
  18. cat2 = cat1.concat(divP2);
  19.  
  20. document.getElementById('div1').innerHTML = cat2;
  21. }
  22.         html += curLine + '<br />';
  23.     }
  24.     document.getElementById('div1').innerHTML+= html;
  25. }
  26. </script>
I have to do something to the incoming string (change it to html) before it is added to the html string. Once it is added to the html string it is too late because after processing, the html string is what goes into the div1.innerHTML.
Mar 23 '15 #17

P: 24
This is code I am running. Here is the result.

Expand|Select|Wrap|Line Numbers
  1. <a href="http://steelers.com"> Pittsburg Steelers</a>
  2. This is line 1.
  3. This is line 2.
  4. This is line 3.
  5. <a href="http://steelers.com"> Pittsburg Steelers</a>
The http://www.steelers.com win again.
Mar 23 '15 #18

P: 24
The last actually comes out as text not the link. The link appeared when I copied and pasted.
Mar 23 '15 #19

Rabbit
Expert Mod 10K+
P: 12,364
And if you'll notice, the code you just posted is different from the code you originally posted, even when you take out the commented code.

And like I said in post #16, after you told me that you didn't actually use the escape html function in the code you originally posted, I investigated further. The issue is line 4. By then, the HTML has already been escaped. What you need to do then is to unescape the HTML.
Mar 23 '15 #20

Rabbit
Expert Mod 10K+
P: 12,364
Further investigation reveals a possible way to read it unescaped in the first place. But there is a caveat. Instead of innerHTML, you can use innerText in internet explorer or textContent in other browsers to get the unescaped version of the text. But this requires you to test the browser so you know which version to use.

A more agnostic approach would be to use the innerHTML version with the escaped text and then unescape it.
Mar 23 '15 #21

P: 24
OK, thanks. I've been looking at both ways, but leaned toward innerHTML.
Mar 23 '15 #22

Rabbit
Expert Mod 10K+
P: 12,364
I think I would lean towards innerHTML as well and unescaping it. It's more likely to work with every browser.

Let us know if you have trouble unescaping the HTML.
Mar 23 '15 #23

P: 24
Well nothing is working. Seems like a line like
<a href="http://www.steelers.com">Steelers</a> win. I tried escape and unescape and got the same result: it only puts the text version in the div. I want the following in the div
Steelers win

Expand|Select|Wrap|Line Numbers
  1. function LoadFile() {
  2.     var oFrame = document.getElementById("frmFile");
  3.     var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
  4.     while (strRawContents.indexOf("\r") >= 0)
  5.         strRawContents = strRawContents.replace("\r", "");
  6.     var arrLines = strRawContents.split("\n");
  7.     var html='';
  8.     for (var i = 0; i < arrLines.length; i++) {
  9.         var curLine = arrLines[i];
  10.  
  11. if(curLine.search("href") > -1)
  12. {
  13. var divP1 = '<div>';
  14. var divP2 = '</div>';
  15. var tLine = curLine;
  16. var cat1 = divP1.concat(curLine);
  17. cat2 = cat1.concat(divP2);
  18. //curLine=unescape(cat2);
  19. //html += curLine;
  20. curLine = unescape(cat2);
  21. //document.getElementById('div1').innerHTML = curLine;        
  22. html += curLine + '<br />';
  23. }
  24. else
  25.         html += curLine + '<br />';
  26.     }
  27.     document.getElementById('div1').innerHTML+= html;
  28. }
  29. </script>
  30.  
Mar 24 '15 #24

P: 24
I put the [code] in this time.
Mar 24 '15 #25

Rabbit
Expert Mod 10K+
P: 12,364
Where's your code for the unescape function?
Mar 24 '15 #26

P: 24
Does anyone else have comments about the question? Thanks.
Mar 24 '15 #27

P: 24
Can someone directly answer this question? How can I take this line/string
<a href="http://bytes.com">Bytes</a> topics
and add it to a div as Bytes topics
Don't just say use escape and unescape without an example. The string is appended to other strings that may not have html tags and stored in a variable string. The final string is added to the innerhtml of the div. So basically it seems like adding html to a string.
Mar 24 '15 #28

P: 24
Never mind, I think I figured it out.
Mar 24 '15 #29

Rabbit
Expert Mod 10K+
P: 12,364
If you didn't know what escaping and unescaping HTML meant, you could have asked. I thought you knew what it meant because the code you posted in #3 shows that you used a function called escapeHTML. And I figured if you knew how to write a function to escape HTML, then you knew how to write a function to unescape HTML.

Anyways, can you post your final code in case someone else finds this thread and has the same question?
Mar 24 '15 #30

Post your reply

Sign in to post your reply or Sign up for a free account.