在一些动态网站中，有着滚动不同的字幕选择后弹出新的界面内容，但是查看它们这些网页代码的发现没有相关内容，通过审查元素才能看到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代码方法.