JS&jQueryプレミアム05(htmlにappendで要素を挿入)


目的:JSでhtmlにコンテンツを追加する.
どのように1を実現して、JSの中で要素を作成します;2、htmlに要素を挿入します.
例:

<html>
<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
head>
<body>
    <div style="width: 100%;text-align: center;margin-top: 50px;">
        <h1>       h1>
    div>
    <hr>
    <div style="width: 100%;text-align: center;">
        <h3 style="color: grey;">    h3>
    div>
    <div id="all_teas">

    div>


    <script type="text/javascript">
        $(document).ready(function(){
        //        :
            var html='

hi

:20

'
// append html id “all_teas” 。 $('#all_teas').append(html);
script> body> html>

実際の効果は次のとおりです.
<div id="all_teas">

    <div style="width: 333px;height:300px;float: left;text-align: center;margin-top: 10px 0;"><h1 style="margin:0;">hih1><p>  :20 p>div>  div>