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

outerHTML,outerTEXT,innerHTML,innerTEXT

2016-03-08 11:06 621 查看

<!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>

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

标签：

相关文章推荐

新的分享

章节导航