javascript怎么修改html内容(2)-木庄网络博客

下面示例使用 outerText、innerText、outerHTML 和 innerHTML 这 4 种属性为列表结构中不同列表项插入文本。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
 
</head>
 
<body>
     <h1>单击回答问题</h1>
    <ul>
        <li>你好</li>
        <li>你叫什么？</li>
        <li>你是什么职业？</li>
        <li>你喜欢 JS 吗？</li>
    </ul>
    <script>
        ul = document.getElementsByTagName("ul")[0];  //获取列表结构
        var lis = ul.getElementsByTagName("li");  //获取列表结构的所有列表项
        lis[0].onclick = function () {  //为第一个列表项绑定事件处理函数
            this.innerText = "谢谢";  //替换文本
        }
        lis[1].onclick = function () {  //为第二个列表项绑定事件处理函数
            this.innerHTML = "<h2>我叫 PHP中文网</h2>";  //替换HTML文本
        }
        lis[2].onclick = function () {  //为第三个列表项绑定事件处理函数
            this.outerText = "我是学生";  //覆盖列表项标签及其包含内容
        }
        lis[3].onclick = function () {  //为第四个列表项绑定事件处理函数
            this.outerHTML = "<h2>当然喜欢</h2>";  //覆盖列表项标签及其包含内容
        }
    </script>
</body>
 
</script>
</html>