分别使用java script和jQuery添加页面元素

简介: 分别使用java script和jQuery添加页面元素

HTML结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery-查找HTML元素</title>
</head>
<body>
<p id="test0">床前明月光</p>
<button id="btn1">显示文本text()</button>
</body>
</html>

java script代码

<script type="text/JavaScript" src="./js/jquery-3.4.1.js"></script>
<script type="text/JavaScript">
    $(document).ready(function(){
        //测试text()
        $("#btn1").click(function(){
            alert("文本内容: " + $("#test0").text());
        });  
    });
</script>

jQuery代码

<script type="text/JavaScript">
  window.onload = function(){
    let but=document.getElementById('btn1');
    console.log(but);
    but.onclick=function(){
      alert("床前明月光");
    };
  };
</script>
目录
相关文章
|
10天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
24 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
2天前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
22 10
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
14 2
|
18天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
14天前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
13 2
|
26天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
28天前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
20 6
|
26天前
|
Java 编译器 测试技术
|
6天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
6天前
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组
下一篇
无影云桌面