如何使用jquery html（）將其添加到我的html頁面？

Question

我正在嘗試類似的操作，例如當我單擊某些html代碼生成的內容時。

<script type="text/javascript">
$("#state2").click(function(){


    var val = $(this).val();

    if(val=="TASSUB"){


        $(".text").html("

        <div class="add_info">
<p><strong>Venue:</strong> Henry Jones Art Hotel </p>
<p style=" text-indent: 3.5em;"> 5 Hunter St, Hobart TAS 7000 </P>
<p><strong>Date: </strong>&nbsp; Monday 15 September</p>
<p><strong>Time: </strong>&nbsp; 3.00 – 5.00pm</p>
 <p style=" text-indent: 3.5em;">(2.30pm arrival for registration and refreshments)
</P>

</div>

        ");

        }

    else if(val=="SASUB"){


        $(".text").html("<p>SA-Tuesday 16 September 3.00 – 5.00pm</P>");

        }

    });


</script>

當我單擊＃state2的選擇菜單時，應創建一些html代碼。 但顯示錯誤。 我該怎么辦？

Answer 1

嘗試這個：

 $("#state2").click(function(){
            var val = $(this).val();
            if(val=="TASSUB"){
                $(".text").html('<div class="add_info"><p><strong>Venue:</strong> Henry Jones Art Hotel </p><p style=" text-indent: 3.5em;"> 5 Hunter St, Hobart TAS 7000 </P><p><strong>Date: </strong>&nbsp; Monday 15 September</p><p><strong>Time: </strong>&nbsp; 3.00 – 5.00pm</p><p style=" text-indent: 3.5em;">(2.30pm arrival for registration and refreshments)</p></div>');
            }
            else if(val=="SASUB"){
                $(".text").html("<p>SA-Tuesday 16 September 3.00 – 5.00pm</P>");
            }
        });

我更改了引號，因為字符串中有很多雙引號，當我們針對這種要求復制html並將其粘貼到腳本中時，您需要確保沒有與雙引號沖突的引號（雙引號或單引號）正在添加。

還有另一種解決方案，在字符串中將雙引號替換為單引號，問題已解決！

DEMO

Answer 2

在此（“ .text”）。html（“ ...”）之前缺少"$"符號，並且content inside .html function is not quoted properly 。 嘗試這個：

 $("#state2").click(function(){
            var val = $(this).val();
            if(val=="TASSUB")
            {
               $(".text").html('<div class="add_info"><p><strong>Venue:</strong> Henry Jones Art Hotel </p><p style=" text-indent: 3.5em;"> 5 Hunter St, Hobart TAS 7000 </P><p><strong>Date: </strong>&nbsp; Monday 15 September</p><p><strong>Time: </strong>&nbsp; 3.00 – 5.00pm</p><p style="text-indent: 3.5em;">(2.30pm arrival for registration</p></div>');
            }
            else if(val=="SASUB"){
                $("#state1").html("<p>SA-Tuesday 16 September 3.00 – 5.00pm</P>");
            }
        });

此處演示
另外， you are using "text" as class name HTML中的you are using "text" as class name ，這not good practice因為文本是HTML中的標准輸入類型名稱。 <input type="text" />

Answer 3

請看我的小提琴

您在.html代碼未正確引用，我不知道我是否正確，但是基於我在jQuery中創建元素時使用.html經驗，將無法使用空格

$(".text").html("<div class='add_info'><p><strong>Venue:</strong> Henry Jones Art Hotel </p><p style=' text-indent: 3.5em;'> 5 Hunter St, Hobart TAS 7000 </P><p><strong>Time: </strong>&nbsp; 3.00 – 5.00pm</p><p style=' text-indent: 3.5em;'>(2.30pm arrival for registration and refreshments)</P></div>");

Answer 4

您可以通過類名稱選擇器$(".text").Html("Your Html Content ")嘗試ID。