您的位置：首页 > Web前端 > JQuery

原生JS与jQuery操作DOM

2019-06-10 21:17 1581 查看

初入jQuery的学习，应该举一反三，去辨析原生JS与jQuery操作DOM的不同之处，比较二者的优劣势。以下是我自己总结的最基本的实现追加列表到body中操作。代码简单易懂，初学者应该灵活掌握

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery与原生JavaScript</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<style>
body{color: red;font-size: 18px;}
button{width: 60px;height: 40px;}
</style>
<body>
<button onclick="JSclick()">点击我!</button>
<ul id="ul"></ul>
<button id="JQclick">点击我!</button>
<ul id="ul2"></ul>
</body>
<script>
var ul = document.getElementById("ul");
/*原生JS DOM操作实现添加列表*/
function JSclick(){
var jslist = document.createElement("li");//创建列表结点
var jstext = document.createTextNode("这是用原生JavaScript的方法添加的列表");//创建文本结点
jslist.appendChild(jstext);//将文本节点添加到列表节点中
ul.appendChild(jslist);//将列表添追加入body ul显示
}

/*Jqeury DOM操作实现添加列表*/
$("#JQclick").click(function(){
var $jqlist = "<li>这是用Jquery方法添加的列表</li>";
$("#ul2").append($jqlist);
})
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航