Javascript中的HTML代码失败

HTML code in Javascript fails

本文关键字：失败 代码 HTML 中的 Javascript      更新时间：2023-09-26

我需要在我的代码中添加一个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>

使用

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

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

还请注意，在失败的代码中，缺少for循环，因此不会定义i。

第二段代码，使用item.html("<a>Options for your 1st $Name</a>");可能工作良好。但是您没有为<a>元素包含href属性，这将导致一些浏览器不将文本装饰为链接。为了将其装饰为链接(下划线，特色颜色等)，您可以将其替换为:

item.html("<a href='"'">Options for your 1st $Name</a>");
这个<<p>看到,strong>短演示。
相关文章：