Javascript中的HTML代碼失敗

Question

我需要在我的代碼中添加一個HTML錨點。 第一個代碼工作正常，但不包括我需要的錨標記。 但第二個失敗了：

這很好，不包括：

<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>

這失敗了，包括：

<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>

Answer 1

采用

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

代替

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

另請注意，在失敗的代碼中， for循環丟失，因此i不會被定義。

Answer 2

第二段代碼，使用item.html("<a>Options for your 1st $Name</a>"); 可能工作正常。 但是你沒有包含<a>元素的href屬性，這會導致某些瀏覽器不將文本裝飾為鏈接。 為了將它作為鏈接（下划線，特征顏色等）進行裝飾，您可以將其替換為：

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

另見這個簡短的演示 。