首页 > 代码库 > JavaScript 动态创建标记
JavaScript 动态创建标记
网页的结构由标记负责创建,JavaScript函数只用来改某些细节而不改变其底层结构,js也可用来改变网页的结构和内容:
传统方法:1.document.write 快捷将文档插入到网页中:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>text</title> 6 </head> 7 <body> 8 <script> 9 document.write("<p> This is inserted.</p>");10 </script>11 </body>12 </html>
但是违背了“行为应该与表现分离”的原则,不建议使用;
2.innerHTML属性:可以用来读写某给定元素的HTML内容,标准化的DOM像手术刀一样精细,二innerHTML属性则像一把大锤一样粗放:
1 <!DOCTYPE html>//test.html 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>text</title> 6 </head> 7 <body> 8 <script> 9 document.write("<p> This is inserted.</p>");10 </script>11 <div id="testdiv">12 <p id="yourbody">This is <em>my</em> content.</p>13 </div>14 <script type="text/javascript" src="example.js"></script>15 </body>16 </html>
1 window.onload = function(){//examlple.js2 //if (document.getElementById("testdiv")) alert("get testdiv");3 var testdiv = document.getElementById("testdiv");4 alert(testdiv.innerHTML);5 6 //if (document.getElementById("yourbody")) alert("get yourbody");7 var testid = document.getElementById("yourbody");8 alert(testid.innerHTML);9 }
innerHTML不仅可以用来读取元素的HTML内容,还可以用它把HTML内容写入元素,如下所示:
1 window.onload = function() {2 var testdiv = document.getElementById("testdiv");3 testdiv.innerHTML = "<p>You know what? <em>I can change your life!<em></p>";4 }5 //在js里添加function修改id=testdiv的元素的HTML内容
3.DOM方法:在浏览器看来,DOM节点树才是文档,在DOM看来,一个文档就是一个节点树。
将一段文本插入到testdiv元素中:1、创建一个新的元素,2、把新元素插入节点树
1 window.onload = function() {2 var para = document.createElement("p");//创建元素节点3 var testdir = document.getElementById("testdiv");4 testdir.appendChild(para);5 var txt = document.createTextNode("You know that! <em>I can change your life!</em>");//创建文本节点6 para.appendChild(txt);7 }
JavaScript 动态创建标记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。