简体   繁体   中英

HTML code in Javascript fails

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>

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.

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 .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM