I can't set C source code into html using innerHTML javascript

Question

I used XMLHttpRequest() to get C source code from server.

return HttpResponse(code, mimetype='text/x-c')

and I got correct source code when I checked it using alert(code).

like this

enter code here
#include<stdio.h>
int main(){
    .....
}

and I split it into each lines in javascript.

var arr = code.split('\n');
window.document.getElementById("id").innerHTML = arr;

the result is like this.

#include
,int main(){
,    ....
,}

I can't find <stdio.h> I don't know why.... I dont think it's because of '<' character. Cuz in for loop, I can find '<' character.

what's the problem?

Community · Accepted Answer · 2017-05-23 11:50:02Z

4

It's the '<' character.

You're setting HTML. Every browser parses stuff between '<' and '>'. In your case, it's finding what it thinks is the DOM element "stdio.h". No browser knows what to do with it, so it ignores it, instead of rendering it.

See Convert special characters to HTML in Javascript for ways to escape the string you receive properly.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Sep 26, 2013 at 3:48

Scott Mermelstein

15.4k4 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2659088 Over a year ago

but i can find '<' characters in for loop or other lines. I dont know why split function doesnt work..

user2659088 Over a year ago

and I also wrote it in <pre> block

Scott Mermelstein Over a year ago

You'll have to explain your for loop issue better - what do you have in it that's making you think it looks ok? If you're using alert like you did in checking your response, there's a huge difference between alert and setting an element's innerHTML - namely, one isn't processed by the web client's renderer, while the other is.

slebetman Over a year ago

@user2659088: <pre> blocks can still contain other HTML. For example, it must process <b> or <span> tags. Therefore <stdio.h> will be interpreted as a HTML tag. Scott gave you the solution - convert < to <. See the link he gave you.

Kevin A. Naudé Over a year ago

@user2659088 The '<' is still there, it's just invisible. The browser thinks it is starting an element with the tag-name 'stdio.h', which it doesn't understand. Note that '<pre>' is a formatting context -- nothing more.

|

user2659088 · Accepted Answer · 2013-09-26 05:36:52Z

0

example code was like this:

#include<stdio.h>

int main(){
    int i;
    for(i=0; i<10; i++){
        printf("aa");
    }
}

and I split it into lines, and array only didn't contain <stdio.h>.

the only problem was <stdio.h>. '<' character in for loop condition, it was visible.

I'll check converting problem again later.

answered Sep 26, 2013 at 5:36

user2659088

1331 silver badge7 bronze badges

1 Comment

Scott Mermelstein Over a year ago

Ah, I finally see what you're saying. You're saying the < in the for loop didn't disappear. In this case, the parser perceives an unclosed tag for a 10 element, and just renders "the opening tag" and everything after it as text. If you had a > anywhere lower in your code, it would be a different story, though the parser may catch on from the sheer number of syntax errors it generates (since not everything after the 10 would be in attribute syntax) that it was intended as a literal as well.

Collectives™ on Stack Overflow

I can't set C source code into html using innerHTML javascript

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related