javascript怎么添加元素
时间:2021-07-05 来源:互联网
今天PHP爱好者给大家带来方法:1、appendChild()方法在末尾插入新元素,语法“appendChild(newchild)”;2、insertBefore()方法,在开头插入新元素,新语法“insertBefore(newchild,refchild)”。希望对大家有所帮助。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
在文档中有两种办法插入新节点(元素),一种是在开头插入,一种是在末尾插入。
appendChild()方法:在末尾插入新节点
JavaScript appendChild() 方法可向当前节点的子节点列表的末尾添加新的子节点。用法如下:
appendChild(newchild)
参数 newchild 表示新添加的节点对象,并返回新增的节点。
示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">单击按钮创建并添加p标签</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var p=document.createElement("p");
var t=document.createTextNode("新添的p标签");
p.appendChild(t);
document.body.appendChild(p);
};
</script>
</body>
</html>
效果图:
如果文档树中已经存在参数节点,则将从文档树中删除,然后重新插入新的位置。如果添加的节点是 DocumentFragment 节点,则不会直接插入,而是把它的子节点插入当前节点的末尾。
将元素添加到文档树中,浏览器会立即呈现该元素。此后,对这个元素所作的任何修改都会实时反映在浏览器中。
insertBefore()方法:在开头插入新节点
JavaScript insertBefore() 方法可向当前节点的子节点列表的开头添加新的子节点。用法如下:
insertBefore(newchild, refchild)
其中参数 newchild 表示新插入的节点,refchild 表示插入新节点的节点,用于指定插入节点的后面相邻位置。插入成功后,该方法将返回新插入的子节点。
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
</body>
</html>
}
效果图:
以上就是javascript怎么添加元素的详细内容,更多请关注php爱好者其它相关文章!
-
腾讯QQ邮箱快速登录入口 - 安全便捷收发邮件首选平台 2025-09-19
-
腾讯SOSO街景地图升级版 - 高清实景导航,畅游城市不迷路 2025-09-19
-
腾讯QQ聊天软件下载安装-最新官方PC手机版免费畅聊工具 2025-09-19
-
腾讯QQ手机令牌下载安装及使用教程 安全登录必备工具 2025-09-19
-
腾讯QQ空间视频怎么上传和下载?最新教程分享 2025-09-19
-
腾讯QQ号免费申请 快速注册教程及安全使用指南 2025-09-19