一.在使用 jQuery 时, append() 方法在被选元素的结尾 (仍然在内部) 插入指定内容
使用方法:$(selector).append(content),content 为必需的. 规定要插入的内容(可包含 html 标签)
二.在使用原生 JS 时, 使用 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点,
用法: parent.appendChild(child); child 没有引号包住, child 参数, 是 node 类型. 给一个空文档里面动态创建元素, 要使用 document.body.appendChild(child).
三. 例子:
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <style>
- .test{ color: red; border:1px solid red; display: inline-block; font-size:
- 20px; width: 200px; height:50px; }
- </style>
- </head>
- <body>
- <p id="p1">
- appendChild 方法是在父级节点中的子节点的末尾添加新的节点
- </p>
- <p id="p2">
- jQuery 中 append 方法在被选元素的结尾 (仍然在内部) 插入指定内容
- </p>
- </body>
- <script src="script/jquery-1.11.3.js">
- </script>
- <script>
- // 用 jQuery 来实现
- $(function() {
- $("#p2").bind("click",
- function() {
- $(this).append("<strong>--- 我是用 jquery 实现的</strong>");
- })
- })
- // 用原生 JS 来实现
- Windows.onload = function() {
- var pobj = document.getElementById('p1');
- pobj.onclick = function() {
- var strongobj = document.createElement('strong');
- var textobj = document.createTextNode("---- 我是使用原生 Js 实现的");
- pobj.appendChild(strongobj.appendChild(textobj));
- }
- }
- </script>
- </HTML>
原生 JS 实现 append()方法
来源: http://www.bubuko.com/infodetail-3340673.html