JavaScript实现了自动生成网页元素(按钮、文本等)的功能 ).

创建元素的方法：

1.使用createTextNode()创建文本对象2。使用createElement()创建标签对象3。直接使用容器标签中的一个属性：innerHTML——本质上改变标签容器中的“HTML代码”，这不是我们认为的对象树的操作详细代码：

正文输入类型='button '值=' create and add node 1 ' onclick=' addnode 1()'/输入类型=' button '值=' create and add node 2 ' onclick=' addnode 2()'/。type=' button ' value=' create and add node 3 ' onclick=' addnode 3()'/input type=' button ' value=' remove node 1 ' onclick=' remove node()'/input type=' button ' value=' replace node 2 replace ' onclick=' remove 2()。-1替换2，1不保留-输入类型=' button '值=' clone replacement ' onclick=' clone()'/div id=' div _ id1 '这是一个div模块-/div div div id=' div _ id2 '一定要好好学习。这样，你就能得到很好的回报。/div div id='div_id3 '努力工作，加油 () /div div id=' div _ ID4 '你知道面积，实验面积/div /body方法1:创建一个文本文档。

span style=' font-size :18 px；'Addnode1 () {//1使用createTextNode()创建一个文本对象vartext=document . createTextNode('这是一个修改并创建的文档')；//2获取div对象varno de 1=document . getelementbyid(' div _ id1 ')；//子节点1.appendChild(文本)作为div对象添加；}/span span style=' font-size :24 px；'/span模式2:使用createElement()创建标签对象。

添加node2 () {//1，使用createElement()创建标签对象varnn=document . create element(' input ')；nn . type=' button ' nn . value=' created button '；nn.target=' _ blank//2，获取div对象varno D2=document . getelementbyid(' div _ id2 ')；//子节点2.appendChild(nn)作为div对象添加；}模式3:直接利用容器标签中的一个属性：innerHTML——本质上改变标签容器中的“HTML代码”，这不是我们认为的对象树的操作。

函数addnode 3(){ var mm=document . getelementbyid(' div _ ID3 ')；mm . innerhtml=' a href=' http://www . Baidu.com '输入类型=' button '值=' new button '/a；} Delete NoderemoveNode Node和removeChild用于从元素中删除子节点，通常采用第二种方法。

function remove node(){ var node=document . getelementbyid(' div _ id4 ')；//alert(node . nodename)；//DIV //自杀节点. remove node(true)；//removeNode从文档层次结构中移除对象。Ie可以出现，并自杀节点。parentnode。通常不使用removechild(节点)。////通过父节点删除其子节点，常用alert(' aa ')；}替换函数remove2 () {varnode1=document。getelementbyid ('div _ id1 ')没有保留替换；var node 2=document . getelementbyid(' div _ id2 ')；//node 1 . replace node(node 2)；//自杀不是万能的////通过父节点替换其子节点：用node1替换node 2 node 1 . parent node . Replace child(node 1，node 2)；//object.replacechild (onewnode，ochild node)} clone node function clone(){ varno de 1=document . getelementbyid(' div _ id1 ')；var node 2=document . getelementbyid(' div _ id2 ')；var node 1 _ 2=node 1 . clonenode(true)；//false只能克隆基本节点，不会克隆下面的其他子节点。//对象被克隆。默认参数为false。当参数为真时，克隆节点1。parentnode。replacechild (node1 _ 2，node2)及其子节点；}渲染：

以下所有源代码：

！DOCTYPE html html标题DoM _ operation。html/title style type=' text/CSS ' div { border : # 00f solid 1px；宽度宽度：200像素高度：100 px}/样式脚本类型='文本/JavaScript '/AAAA增//方式一创建文本文档函数addNode1(){ //1利用createTextNode()创建一个文本对象var text=文档。createtextnode('这是修改的，创建的文档');//2获取差异对象var节点1=文档。getelementbyid(' div _ id1 ')；//添加成差异对象的孩子node1.appendChild(文本);}函数addNode2(){ //1，利用createElement()创建一个标签对象var nn=文档。创建元素(“输入”)；nn.type='button' nn.value='创建的按钮；nn.target=' _ blank//2，获得差异对象var节点2=文档。getelementbyid(' div _ id2 ')；//添加成差异对象的孩子节点2。appendchild(nn)；} //直接利用容器标签中的一个属性：innerHTML -本质上改该标签容器中的" html代码",不是我们认为的对象树的操作函数addnode 3(){ var mm=document。getelementbyid(' div _ ID3 ')；mm . innerHTMl=' a href=' http://www .百度。com“输入类型=”按钮“值=”新建的按钮/a '；} //BBBBBB -删//删除节点使用removeNode和removeChild从元素上删除子结点两种方法，通常采用第二种方法函数remove node(){ var node=document。getelementbyid(' div _ id4 ')；//alert(节点。nodename)；//DIV //自杀式节点。移除节点(真)；//移除节点从文档层次中删除对象ie。可以出现现象，一般不采用自杀式node.parentNode.removeChild(节点);////通过父节点去删除它的孩子，一般常用警报(' aa ')；} //替换没有保留替换的那个函数remove 2(){ var node 1=document。getelementbyid(' div _ id1 ')；var节点2=文档。getelementbyid(' div _ id2 ')；//节点1。替换节点(节点2)；//自杀式不通用////通过父节点去替换它的孩子：用节点一去替换节点2节点1。parentnode。替换子节点(节点1，节点2)；//object.replaceChild(oNewNode，oChildNode) }函数clone(){ var node 1=document。getelementbyid(' div _ id1 ')；var节点2=文档。getelementbyid(' div _ id2 ')；var节点1 _ 2=节点1。克隆诺得(真)；//false只能克隆基本的，不会克隆下面的其他子节点//克隆一个对象，默认参数为假的。参数为真实的时，连子节点一起克隆节点1。父节点。替换子节点(节点1 _ 2，节点2)；}/脚本/头体输入类型='按钮'值='创建并添加节点1 ' onclick=' add node 1()'/input type=' button ' value='创建并添加节点2 ' onclick=' add node 2()'/input type=' button ' value='创建并添加节点3 ' onclick=' add node 3()'/input type=' button ' value=' remove节点1 ' onclick=' remove node()'/input type=' button ' value=' replace node节点2替换onclick='remove2()'/！- 1替换2,并且一没有保留-输入类型="按钮"值="克隆"替换onclick=' clone()'/div id=' div _ id1 '这是差异模块- /div div id='div_id2 '必须好好地学习，这样才能让自己有很好的回报/div div id='div_id3 '好好干，加油(^^)/div div id='div_id4 '你懂得区域，实验区域/div /body /html以上就是为大家分享如何通过Java脚本语言实现自动生成网页元素功能的方法，希望对大家的学习有所帮助。