• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2085
  • Last Modified:

DIV's innerHTML manipulating content

I have a string that contains HTML and want to insert this into a DIV tag's innerHTML.  My HTML is being manipulated, which causes the end result to render incorrectly.  I'm guessing this happens because I'm inserting HTML into the innerHTML, which is giong to modify HTML content.

For example, the first token (token[0]) is "<div".  When I insert that into the "contain" DIV innerHTML, nothing appears.  Also, "</div><div" inserts as "<DIV></DIV>".

This is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<script type="text/ecmascript">
function go(){
var col = document.getElementById("contain");
var someString = "<div style='margin:5px'><h3>1. First Header.</h3> First set of content. </div><div style='margin:5px'><h3>2. Second 'Header.'</h3> Second s'et of content. </div>";
var token = someString.split(" ");    
var count = 0;
        while(count < 17){
            col.innerHTML += token[count] + " ";
            count++;
        }
}
</script>              
<body onload="go();">
    <div id="contain" style="width: 380px;height: 145px; text-align:justify;">
    </div>
</body>
</html>

and here is the output:

style='margin:5px'&gt;
<H3>1. </H3>First Header.
<H3></H3>First set of content.
<DIV></DIV>style='margin:5px'&gt;
<H3>2. </H3>Second 'Header.'
<H3></H3>Second s'et of content.
<DIV></DIV>

The string is coming from C#.  It can be massaged there or in the JS.  Before inserting, I can escape HTML brackets so that "<" is "&lt;".  However, that will still render "&lt;" in innerHTML and innerText.   How should I go about getting unmodified HTML into the DIV?
0
brettr
Asked:
brettr
  • 3
  • 2
1 Solution
 
TNameCommented:
Hi, why the array and the loop?
Why don' you simply add the string to the div's innerHTML?


function go(){
   var col = document.getElementById("contain");
   var someString = "<div style='margin:5px'><h3>1. First Header.</h3> First set of content. </div><div style='margin:5px'><h3>2. Second 'Header.'</h3> Second s'et of content. </div>";
   col.innerHTML+=someString;       
}
0
 
brettrAuthor Commented:
It is actually a subset of another string.  I need to be sure I don't break words in half.  The string length/content can change and the loop handles correct tokenizing.
0
 
TNameCommented:
And couldn't you rebuild the string before assigning it to the innerHTML?

  for(var i=0; i<token.length; i++) {
       s+= token[count] +" " ;                  
       count++;
  }
  col.innerHTML=s;
0
 
TNameCommented:
And of course declare "s" before the loop:
var s='';
0
 
brettrAuthor Commented:
You are absolutely correct.  Since everything is being sent into innerHTML at once, it can't manipulate single HTML tags as it can when they are sent in one at a time.

Thanks.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now