HTML code in Javascript fails

Question

I need to add an HTML anchor in my code. The fist code works fine but does not include the anchor tag that I need. But the second one fails:

This works fine, does not include :

<script type='text/javascript'>//<![CDATA[
  $('#Quantity').keyup(function () {
    var textualValue = $(this).val();
    var numericValue = parseInt(textualValue, 10);
    if (!isNaN(numericValue)) {
      modifyDOMWithNumber(numericValue);
    } else {
      modifyDOMWithNumber(0);
    }
  });
  function modifyDOMWithNumber(number) {
    var ul = $('ul#ListToAlter').empty();
    var item;
    for (var i = 1; i <= number; i++) {
      item = $("<li>");
      if (i == 1) {
        item.text("Options for your 1st $Name");
      }else if(i == 2) {
        item.text("Options for your 2nd $Name");
      }else if(i == 3) {
        item.text("Options for your 3rd $Name");
      } else {
        item.text("Options for your number " + i + "th $Name");
      }
      ul.append(item);
    }
  }
//]]>
</script>

This fails, does include :

<script type='text/javascript'>//<![CDATA[
  $('#Quantity').keyup(function () {
    var textualValue = $(this).val();
    var numericValue = parseInt(textualValue, 10);
    if (!isNaN(numericValue)) {
      modifyDOMWithNumber(numericValue);
    } else {
      modifyDOMWithNumber(0);
    }
  });
  function modifyDOMWithNumber(number) {
    var ul = $('ul#ListToAlter').empty();
    var item;
    for (var i = 1; i <= number; i++) {
      item = $("<li>");
      if (i == 1) {
        item.html("<a>Options for your 1st $Name</a>");
      }else if(i == 2) {
        item.html("<a>Options for your 2nd $Name</a>");
      }else if(i == 3) {
        item.html("<a>Options for your 3rd $Name</a>");
      } else {
        item.html("<a>Options for your number " + i + "th $Name</a>");
      }
      ul.append(item);
    }
  }
  //]]>
</script>

In the second one you're missing an element as item is just undefined, and i is nothing as you're missing the loop. However I don't get the question, if you add the loop and the LI element the second one would be exactly the same as the first one ? — adeneo
– adeneo, Commented Jun 2, 2013 at 10:53
From the .text documentation: "We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML." The following example clearly shows that you cannot use .text to set HTML. Always read the documentation first! — Felix Kling
– Felix Kling, Commented Jun 2, 2013 at 10:58

Felix Kling · Accepted Answer · 2013-06-02 10:59:44Z

3

Use

item.html("<a> what ever html text</a>")

instead of

item.text("<a> xxxx </a>").

Also note that in the code that fails, the for loop is missing, so i won't be defined.

edited Jun 2, 2013 at 10:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Jun 2, 2013 at 10:56

jbaylina

4,7661 gold badge33 silver badges39 bronze badges

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

Comments

gkalpak · Accepted Answer · 2013-06-02 11:15:11Z

1

The second piece of code, using item.html("<a>Options for your 1st $Name</a>"); probably works fine. But you are not inclusing an href attribute for the <a> element, which causes some browsers to not decorate the text as a link. In order for it to be decorated as a link (underline, characteristic color etc), you could replace it with:

item.html("<a href=\"\">Options for your 1st $Name</a>");

See, also, this short demo.

answered Jun 2, 2013 at 11:15

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

HTML code in Javascript fails

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related