outerHTML,outerTEXT,innerHTML,innerTEXT

最新推荐文章于 2021-07-02 21:31:11 发布

change_for_you

最新推荐文章于 2021-07-02 21:31:11 发布

阅读量245

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/change_for_you/article/details/50825647

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>读写文档操作</title>
<meta charset="UTF-8">
<script src="../jquery-2.2.1.js" type="text/javascript"></script>
</head>
<style type="text/css">
li:{cursor:pointer}
</style>
<body>
<h1>are you ok?</h1>
<ul>
<li>hello</li>
<li>what is your name?</li>
<li>what are you doing?</li>
<li>do you like it?</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
//取得ul节点
var ul = $("ul")[0];
//取得所有的li节点
var list = $("li"); // list = $("li"); //会多出些text
//click jquery方法，onclick js方法
list[0].onclick = function(){
this.innerText = "谢谢"; //innerText,往指定元素后面加入文本内容
}
list[1].onclick = function(){
this.innerHTML = "<h2>我是菜鸟</h2>"; //innerHTML，往指定元素后面加入html内容
}

list[2].onclick = function(){
this.outerText = "覆盖指定元素的内容"; //outerText,覆盖指定元素的内容
}
list[3].onclick = function(){
this.outerHTML = "<p>我是菜鸟党</p>"; //同innerHTML，由插入改为覆盖
}
});
</script>
</html>