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://news.baidu.com">我是新闻</a>');
      // console.log($link);
      // 追加
      $('#div1').append($link);
    });

  });
</script>

posted on 2022-08-01 22:37 beyondx 阅读(365) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery事件对象

· jQuery设置获取文本内容text()

· javascript构造函数1

· javascript构造函数2

· javascript原型

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

beyondx

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

导航

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜

beyondx

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

导航

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜

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