使用JavaScript操作HTML元素

最新推荐文章于 2021-07-09 10:11:39 发布

arccosY

最新推荐文章于 2021-07-09 10:11:39 发布

阅读量734

点赞数

本文链接：https://blog.csdn.net/darkLight2017/article/details/105923562

版权

1.选择元素，共三种方法

var a = document.getElementById("id");
var b = document.getElementsByTagName("p");
var c = document.getElementsByName("name");

第一种是根据HTML元素的id选择唯一的一个元素，因为HTML的id是唯一的。第二种是根据标签选择元素，返回的是所有 <p> 元素数组。第三种根据name属性选择元素，返回的同样是数组。

2.添加元素

var body = document.getElementsByTagName("body");
var p1 = document.createElement("p");
p1.innerHTML = "hello";
body.append(p1);

createElement()是创造一个HTML元素的方法。参数是要创造的元素的标签，因此p1是创造出的一个<p>标签对象，其属性innerHTML是这个标签下包含的HTML代码。之后选择创造出的元素的父元素，使用append()方法添加。比如上述代码执行后页面变成：

<body>
	<p>
		hello
	</p>
</body>

3.删除元素
选择出要删除的元素和其父元素，使用removeChild()删除元素。比如上面的例子中，要删除<body>中的<p>标签，代码如下

var body = document.getElementsByTagName("body");
var p = document.getElementsByTagName("p");
body[0].removeChild(p[0]);

关注