xhtml 和 jQuery 是否有简单的方法来附加 html？

Question

登录以获取在 jQuery 中构建 html 代码并附加到 DOM 的简单方法，无需处理特殊的 html 字符，如下所示。附加 yyyy 不起作用。有什么简单的方法吗？

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){


            $("div").append("xxxxx");
            $("div").append("<span>yyyyy</span>");
            $("div").append("&lt;span&gt;zzzzz&lt;&#x2F;span&gt;");


}); 



</script>


</head>
<body>
        <div>


        </div>



</body>
</html>

Answer 1

当您使用 XML 时，yyyyy 是经过解析的字符数据，即使它位于脚本元素内。（text/html HTML 解析器知道切换到未解析的字符数据，但 XML 解析器不知道）

所以您需要明确地告诉它，在脚本的开头和结尾使用 CDATA 分隔符 <![CDATA[ 和 ]]>。所以：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

    <script>
    <![CDATA[

    $(document).ready(function(){
        $("div").append("xxxxx");
        $("div").append("<span>yyyyy</span>");
        $("div").append("&lt;span&gt;zzzzz&lt;&#x2F;span&gt;");
    }); 

    ]]>
    </script>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

或者，如果您仍希望按照当前的方式添加 zzzzz，请在 $("div").append("<span>yyyyy</span>"); 行周围添加 CDATA 分隔符。

xhtml 和 jQuery 是否有简单的方法来附加 html？

xhtml and jQuery is there and easy way to append html?

xhtml

jquery

append