JS&jQuery高级05(用append在html中插入元素)

目的
在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>

你可能感兴趣的:(js,jQuery,javascript,html)