jQuery中 创建元素 html()/$() 


<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 21:36-->
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    #div1{
      width: 300px;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="html()" id="btnHtml1"/>
<input type="button" value="$()" id="btn1"/> <br/><br/>

<div id="div1">
  <p>p1
    <span>span1</span>
  </p>
</div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    // 原生js中创建节点: document.write();  innerHTML;  document.createElement();

    // jQuery中如何创建节点呢?
    // html();   $();

    // 1.html();
    $('#btnHtml1').click(function () {
      // 获取内容: html()方法 不给参数
      // 获取到 元素的 所有内容
      // console.log($('#div1').html());

      // 1.2 设置内容: html()方法 给参数
      // 设置内容, 会把原来的内容 覆盖
      $('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>');
    });


    // 2.$();
    // 确实能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加.
    $('#btn1').click(function () {
      var $link = $('<a href="http://">我是新闻</a>');
      // console.log($link);
      // 追加
      $('#div1').append($link);
    });

  });
</script>

建立jQuery项目 jquery创建html元素_html