JavaScript 基础教程

发表于 | 分类于 ，
字数统计: 5.7k | 阅读时长 ≈ 24

JavaScript 教程

JS 基本教程

本教程参考w3school JavaScript教程

JS 简介

JavaScript 是脚本语言，是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。

JS 基本功能

  • 写入 HTML 输出
  • 对事件作出反应
  • 改变 HTML 内容
  • 改变 HTML 图像
  • 改变 HTML 样式
  • 验证输入

JS 使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script>标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script>和 </script> 之间的代码行包含了 JavaScript：

实例
1
2
3
<script>
    alert("My First JavaScript");
</script>

浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本；

实例
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <body>
        .
        .
        <script>
            document.write("<h1>This is a heading</h1>");
            document.write("<p>This is a paragraph</p>");
        </script>
    </body>
</html>

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

HTML 文档中可以放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一位置处，不会影响页面内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction(){
                document.getElementByID("demo").innerHTML="My First JavaScript Function";
            }
        </script>
    </head>
    <body>
        <h1>
            My Web Page
        </h1>
        <p id="demo">
            A paragraph
        </p>
        <button type="button" onclick="myFunction()">
            Try it!
        </button>
    </body>
</html>
<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
        <h1>
            My Web Page
        </h1>
        <p id="demo">
        A Paragraph
        </p>
        <button type="button" onclick="myFunction()">
            Try it
        </button>
        <script>
            function myFunction(){
               document.getElementById("demo").innerHTML="My First JavaScript Function";
            }
        </script>
    </body>
</html>

我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含多个网页使用的代码。

外部 Javascript 文件的文件扩展名是 .js

如需使用外部文件，请在 <script> 标签的“src”属性中设置该 .js文件

实例
1
2
3
4
5
6
<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与在 <script> 标签中编写脚本完全一致。注意，外部脚本不能包含 <script> 标签。

JS 输出

JavaScript 通常用于操作 HTML 元素。

操作 HTML 元素

如果需要从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementByID(id) 方法。

请使用 “id” 属性来标识 HTML 元素：

实例

通过指定的 id 来访问 HTML 元素，并改变其内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <body>
        <h1>
            我的第一张网页
        </h1>
        <p id="demo">
            我的第一个段落
        </p>
        <script>
            document.getElementByID("demo").innerHTML="我的第一段 JavaScript";
        </script>
    </body>
</html>

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中：

实例
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <body>
        <h1>
            我的第一张网页
        </h1>
        <script>
            document.write("<p>我的第一段 JavaScript</p>")
        </script>
    </body>
</html>
警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将会被覆盖。

实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
        <h1>
            我的第一张网页
        </h1>
        <p>
            我的第一个段落。
        </p>
        <button onclick="myFunction()">
            点击这里
        </button>
        <script>
            function myFunction(){
                document.write("糟糕！文字消失了。")；
            }
        </script>
    </body>
</html>

JS 语句

JavaScript 语句

JavaScript 语句向浏览器发出命令。语句的作用是告诉浏览器该做什么。

下面的 JavaScript 语句向 id=”demo” 的 HTML 元素输出文本 “Hello World”

1
document.getElementByID("demo").innerHTML="Hello World";
分号；

分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。

在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。浏览器会按照编写顺序来执行每条语句。

本例将操作两个 HTML 元素：

实例
1
2
document.getElementByID("demo").innerHTML="Hello World";
document.getElementByID("myDIV").innerHTML="How are you?";
JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。JavaScript 函数是将语句组合在块中的典型例子。

下面的例子将运行可操作两个 HTML 元素的函数：

实例
1
2
3
4
function myFunction(){
  document.getElementByID("demo").innerHTML="Hello World";
  document.getElementByID("myDIV").innerHTML="How are you?";
}
JavaScript 注释
  1. JavaScript 注释同 C 语言
  2. 单行注释：//
  3. 多行注释：/* */
一些细节

  1. JavaScript 对大小写敏感。

  2. JavaScript 会忽略多余的空格。

  3. 可以在文本字符串中使用反斜杠对代码进行换行。

    1
    2
    document.write("Hello \
    world!");

  4. JavaScript是脚本语言。浏览器在读取代码时，逐行地执行脚本代码。

JS 变量

JavaScript 变量

变量必须以字母开头（也能以 $ 和 _ 开头，但不推荐）。

变量名称大小写敏感

JavaScript 中使用 var 关键词来声明变量，且一条语句中可以声明多个变量。

1
var name="Gates", age=56, job="CEO";

JavaScript 数据类型

JavaScript 有多种变量类型，包括字符串、数字、布尔、数组、对象、Null、Undefined。

1
2
3
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
动态类型

JavaScript 拥有动态类型，相同的变量可用作不同的类型（与 Python 相同）。

1
2
3
var x 			// undefined
var x = 6; 		//数字
var x = "Bill"	// 字符串
字符串

字符串可以是引号中的任意文本。可以使用单引号或双引号。可以在字符串中使用引号，只要不匹配包围字符串的引号即可。

1
2
3
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "bill"';

下面的例子使用字符串对象的长度属性来计算字符串的长度。

1
2
var txt="Hello world!"
document.write(txt.length)

下面的例子使用字符串对象的toUpperCase()方法将字符串转换为大写：

1
2
var txt="Hello world!"
document.write(txt.toUpperCase())
数字

JavaScript 只有一种数字类型。JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。数字可以带小数点，也可以不带。极大或极小的数字可以通过科学记数法来书写。

1
2
3
4
var x1=34.00;
var x2=34;
var y=123e5;	// 12300000
var z=123e-5;	// 0.00123

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。

1
2
var y=0377;
var z=0xFF;
布尔
1
2
var x=true;
var y=false;
数组
1
2
3
4
5
6
7
8
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

var cars=new Array("Audi", "BMW", "Volvo");

var cars=["Audi", "BMW", "Volvo"];
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <body>
        <script>
            var i;
            var cars=new Array();
			cars[0]="Audi";
			cars[1]="BMW";
			cars[2]="Volvo";
            
            for(i=0; i<cars.length; i++){
                document.write(cars[i] + "<br>");
            }
        </script>
    </body>
</html>
对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式（name:value）来定义，属性由逗号分隔。

1
var person={firstname:"Bill", lastname:"Gates", id:5566};

空格和折行无关紧要。声明可横跨多行：

1
2
3
4
5
var person={
    firstname : "Bill",
    lastname : "Gates",
    id : 5566
};

对象属性有两种寻址方式：

1
2
name=person.lastname;
name=person["lastname"];
日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

1
var myDate=new Date()

注释：Date 对象自动使用当前的日期和时间作为其初始值。

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作，如设置一个特定的日期。

日期对象也可用于比较两个日期。

Math 对象

Math（算数）对象的作用是：执行常见的算数任务。

如 Math.PI 表示圆周率，等8种 Math 对象访问的算术值

以及如 Math.max() 等方法 可以使用

正则表达式

通过 new 关键词来定义 RegExp 对象。

1
var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 “e”。

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test() 方法检索字符串中的指定值。返回值是 true 或 false。

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

compile() 方法用于改变 RegExp。compile() 既可以改变检索模式，也可以添加或删除第二个参数

1
2
3
4
5
6
7
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));
Undefined 和 Null

Undefined 这个值表示变量不含有值。（只声明，未赋值）

可以通过将变量的值设置为 null 来清空变量。

声明变量类型

当你声明新变量时，可以使用关键词 new 来声明其类型。

1
2
3
4
5
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当你声明一个变量时，就创建了一个新的对象。

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期等等。

在 JavaScript 中，对象是拥有属性和方法的数据。

1
2
3
4
5
6
7
8
9
var txt = "hello";

// 属性
txt.length=5

// 方法
txt.indexOf()
txt.replace()
txt.search()

在面向对象的语言中，属性和方法常被称为对象的成员。

创建 JavaScript 对象
创建直接的实例
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <body>
        <script>
            person=new Object();
            person.firstname="Bill";
			person.lastname="Gates";
			person.age=56;
			person.eyecolor="blue";
			document.write(person.firstname + " is " + person.age + " years old.");
        </script>
    </body>
</html>
使用对象构造器

本例使用函数来构造对象

1
2
3
4
5
6
7
8
9
10
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
访问对象的属性

访问对象属性的语法是：

1
objectName.propertyName
访问对象的方法

调用对象方法的语法时：

1
objectName.methodName()
添加对象的属性

可以通过为对象赋值，向已有对象添加新属性

假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

1
2
3
4
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
添加对象的方法

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

JS 函数

JavaScript 语法如下：

1
2
3
function functionname(){
    // need to do
}

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

JS 运算符

算术运算符

+, - , *, /, %, ++, —

赋值运算符

=, +=, -=, *=, /=, %=

字符串运算

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如果把数字与字符串相加，结果将成为字符串。

比较运算符

==, !=, >, <, >=, <=

=== 表示全等（值和类型），用到的时候再谷歌吧

逻辑运算符

&&, ||, !

条件运算符

? :

JS 语句

if else

switch

for, while, do…while

for/in 语句循环遍历对象的属性：

1
2
3
4
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
  txt=txt + person[x];
}

break, continue

JS 错误

  • try 语句测试代码块的错误
  • catch 语句处理错误
  • throw 语句创建自定义错误

当错误发生时，JavaScript 将抛出一个错误

JavaScript 测试和捕捉

语法

1
2
3
4
5
6
try{
    // 在这里运行代码
}
catch(err){
    // 在这里处理错误
}

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<script>
			var txt="";
			function message(){
				try{
  					adddlert("Welcome guest!");
  				}
				catch(err){
  					txt="There was an error on this page.\n\n";
  					txt+="Error description: " + err.message + "\n\n";
  					txt+="Click OK to continue.\n\n";
  					alert(txt);
  				}
			}
		</script>
	</head>

	<body>
		<input type="button" value="View message" onclick="message()">
	</body>

</html>

Throw 语句

throw 语句允许我们创建自定义错误：创建或抛出异常。

语法

1
throw exception

exception 可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
    <body>
        <script>
            function myFunction(){
                try{
                    var x=document.getElementById("demo").value;
                    if(x=="")    throw "值为空"；
                    if(isNaN(x)) throw "不是数字";
					if(x>10)     throw "太大";
					if(x<5)      throw "太小";
                }
                catch(err){
                   var y=document.getElementById("mess");
                    y.innerHTML="错误：" + err + "。"; 
                }
            }
        </script>
        <h1>
            我的第一个 JavaScript 程序
        </h1>
        <p>
            请输入 5 到 10 之间的数字：
        </p>
        <input id="demo" type="text">
        <button type="button" onclick="myFunction()">
            测试输入值
        </button>
        <p id="mess"></p>
    </body>
</html>

Js 验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

  • 用户是否已填写表单中的必填项目？
  • 用户输入的邮件地址是否合法？
  • 用户是否已输入合法的日期？
  • 用户是否在数据域中输入了文本？

实例

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

1
2
3
4
5
6
7
8
9
10
11
function validate_required(field,alerttxt){
    with (field){
        if (value==null||value==""){
    		alert(alerttxt);
            return false
        }
		else {
            return true
        }
    }
}

JS HTML DOM

DOM 简介

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

DOM HTML 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

操作 HTML 元素的前提是找到该元素。

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>

</body>
</html>

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素

本例查找 id=”main” 的元素，然后查找 “main” 中的所有 \

元素：

1
2
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

注意，绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

1
document.getElementById(id).innerHTML=new HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

1
document.getElementById(id).attribute=new value

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

1
document.getElementById(id).style.property=new style
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点击这里！</button>

</body>
</html>

DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

1
onclick=JavaScript

HTML 事件的例子

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

在本例中，当用户在

元素上点击时，会改变其内容：

1
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

向 button 元素分配 onclick 事件：

1
<button onclick="displayDate()">点击这里</button>

在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

1
2
3
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn” 的 HTML 元素。当按钮被点击时，会执行该函数.

常见事件

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("已启用 cookie")
	}
else
	{
	alert("未启用 cookie")
	}
}
</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>
onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>
</html>
onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>
onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM 节点

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

实例解释：

这段代码创建新的 \

元素：

1
var para=document.createElement("p");

如需向 \

元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

1
var node=document.createTextNode("这是新段落。");

然后您必须向 \

元素追加这个文本节点：

1
para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

1
var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

1
element.appendChild(para);

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

1
2
3
4
5
6
7
8
9
10
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

1
2
var child=document.getElementById("p1");
child.parentNode.removeChild(child);