- <SCRIPT LANGUAGE="JavaScript">
- window.onload=function(){
- var a =document.createElement("span");
- var b =document.createTextNode("cssrain");
- a.appendChild(b);
- document.body.appendChild(a); //默认添加在文档的最后。
- //如果我们想指定位置,那么得使用insertBefore()
- }
- </SCRIPT>
- <body>
- aaaaaaaaaaaaa
- <div>ccccccc</div>
- <div>bbbbbbbbb</div>
- </body>
DEMO2:insertBefore添加到指定位置
- <SCRIPT LANGUAGE="JavaScript">
- window.onload=function(){
- var a =document.createElement("span");
- var b =document.createTextNode("cssrain");
- a.appendChild(b);
- var mubiao = document.getElementById("b");
- mubiao.parentNode.insertBefore(a,mubiao);
- //插入到div b 前面。
- /*
- parentElement.insertBefore( newElement , targetElement );
- 从上面语法可以看出, 父元素, 新元素,目标元素 是 insertBefore使用的3要素。
- 其实我们可以不管 父元素, 因为 父元素我们 可以用 目标元素.parentNode 得到。
- 那么insertBefore就很好用了。只要给2个参数 : 新元素 和目标元素。
- 那么有没有 insertAfter()方法呢?答案看下个例子。
- */
- }
- </SCRIPT>
- <body>
- aaaaaaaaaaaaa
- <div>ccccccc</div>
- <div id="b">bbbbbbbbb</div>
- </body>
DEMO3:
- <SCRIPT LANGUAGE="JavaScript">
- // DOM没有提供insertAfter()方法,所以我们只能自己写一个。
- function insertAfter(newElement,targetElement) {
- var parent = targetElement.parentNode;
- if (parent.lastChild == targetElement) {
- // 如果最后的节点是目标元素,则直接添加。因为默认是最后
- parent.appendChild(newElement);
- } else {
- parent.insertBefore(newElement,targetElement.nextSibling);
- //如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
- }
- }
- window.onload=function(){
- var a =document.createElement("span");
- var b =document.createTextNode("cssrain");
- a.appendChild(b);
- var mubiao = document.getElementById("b");
- insertAfter(a,mubiao);
- }
- </SCRIPT>
- <body>
- aaaaaaaaaaaaa
- <div>ccccccc</div>
- <div id="b">bbbbbbbbb</div>
- <div>dddddd</div>
- </body>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步