9

While using ASP.NET controls, for example

<h1 id="header" runat="server">text</h1>

if we want to change the text of the header we can do it probably by two properties InnerHTML and InnerText. I want to know what is the basic difference between the two properties?

1
  • @HighCore More or less. See my answer.
    – Yandros
    Oct 16, 2013 at 20:54

3 Answers 3

15

InnerHtml lets you enter HTML code directly, InnerText formats everything you put in there for it to be taken as plain text.

For example, if you were to enter this in both properties: Hello <b>world</b>

This is what you would get with InnerHTML:

Hello world

That is, exactly the same HTML you entered.

Instead, if you use InnerText, you get this:

Hello <b>world</b>

And the resulting HTML would be Hello &lt;b&gt;world&lt;/b&gt;

5
  • Innertext in that case would return Hello world as it determines the contents ignoring tags
    – megawac
    Oct 16, 2013 at 21:09
  • @megawac Are you absolutely sure? As I understand it, InnerText calls HtmlEncode. I can't test it right now, though :/
    – Yandros
    Oct 16, 2013 at 21:12
  • 1
    @megawac Like I said to andleer, there is a difference between InnerText in ASP.Net and innerText in javascript. The post you're referencing is talking about JS.
    – Yandros
    Oct 16, 2013 at 21:18
  • nevermind looks like you were correct - too much js since I worked with asp
    – megawac
    Oct 16, 2013 at 21:19
  • @megawac No problem, it's been a while since I did anything in ASP.Net too. I only recalled that InnerText used HtmlEncode when you set it (and after that last comment, I noticed Tim Medora's answer in this question actually has the decompiled source of the property :P I find it pretty interesting that InnerHTML actually creates the objects for anything it finds there!)
    – Yandros
    Oct 16, 2013 at 21:22
1

When in doubt, go to the source (or decompile):

In HtmlContainerControl:

public virtual string InnerText
{
    get
    {
        return HttpUtility.HtmlDecode(this.InnerHtml);
    }
    set
    {
        this.InnerHtml = HttpUtility.HtmlEncode(value);
    }
}

public virtual string InnerHtml
{
    get
    {
        if (base.IsLiteralContent())
        {
            return ((LiteralControl)this.Controls[0]).Text;
        }
        if (this.HasControls() && this.Controls.Count == 1 && this.Controls[0] is DataBoundLiteralControl)
        {
            return ((DataBoundLiteralControl)this.Controls[0]).Text;
        }
        if (this.Controls.Count == 0)
        {
            return string.Empty;
        }
        throw new HttpException(SR.GetString("Inner_Content_not_literal", new object[]
        {
            this.ID
        }));
    }
    set
    {
        this.Controls.Clear();
        this.Controls.Add(new LiteralControl(value));
        this.ViewState["innerhtml"] = value;
    }
}

Both properties ultimately use InnerHtml, but setting InnerText HTML encodes the value so that it will be displayed literally in the browser versus interpreted as markup.

Remember that assigning to InnerHtml will not encode the value, and thus any user-driven content should be sanitized prior to assignment.

This also emphasizes how important it is to be mindful of view state (note the last line of InnerHtml's setter; everything ends up in view state whether or not you need it).

0

InnerHtml allows to insert html formated text within an HTML container, while InnerText only allows plain text (if I remember correctly this property trims any type of html you try to put in it)

  1. InnerHtml. http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innerhtml.aspx
  2. InnerText. http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innertext.aspx

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.