在一些动态网站中,有着滚动不同的字幕选择后弹出新的界面内容,但是查看它们这些网页代码的发现没有相关内容,通过审查元素才能看到before之类的提示.这样动态的在网页中添加新的html标签元素是怎样实现的呢
js示例:
在js代码中有appendChild()方法与insertBefore()方法用来为页面添加新节点.
appendChild():表示在指定元素开头插入新节点
nsertBefore():表示在指定元素的末尾插入新节点
示例1:
<div id="aaa"></div>
<script type="text/javascript">
var duanluo = document.createElement("p");
var newstr = document.createTextNode("xxxx新内容");
duanluo.appendChild(newstr);
document.getElementById("aaa").appendChild(duanluo);
</script>
创建一个段落节点定义为duanluo,然后创建文本节点设置内容为"xxxx新内容",把文本节点增加到段落的节点里,再显示再标签id为aaa的div元素中去.
appendChild方法可向当前节点的子节点列表末尾添加新的子节点,而insertBefore()方法可向指定节点的子节点列表的开头位置添加新的子节点。
用法如下:
insertBefore(新插入的节点, 需要插入新节点的节点)
insertBefore方法与appendChild方法一样,它们能够将指定元素与其包含所有的子节点一起插入指定的位置去。会先删除移动的元素,然后再插入到新的位置中.
如果需要删除子节点那么,父元素.removeChild(子节点)可以删除已有元素.
使用js代码直接对网页元素进行操作比较麻烦,为了更加的便捷我们可以添加一个js插件jQuery,在jQuery插件里,有多种方法可以很方便的操作html元素与内容.
示例2:
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function tianjia(){
var txt1="新的标签内容"; //添加新文本
var ys1="<div class=\"ysjd\">元素列表</div>";
$("#xianshi").append(txt1,ys1); //添加新元素
}
</script>
<div id="xianshi"></div>
<button onClick="tianjia();">添加新内容</button>
只需要点击添加新内容按钮,就可以快速的添加新div标签.
需要注意的是,代码开始前要先引用jQuery.js.
在制作jquery插件中,添加新div标签元素或文字内容经常用到的:prepend、append、before、after这几个方法.
prepend():在当前父系元素开头添加新元素内容
$("#id").prepend("xxx文字");
append():在当前的父系元素的结尾插入新内容
$("#id").append("xxx文字");
before():在当前的同级别标签之前插入新元素
$("#id").before("xxx文字");
after():在当前同级元素的后面添加新的内容
$("#id").after("xxx文字");
以上就是一些为了在网页中动态添加新节点元素的一些前端js代码方法.