前面用的DOM方法都是对已经存在的元素做出修改 JavaScript也可以通过创建元素和修改现有的元素来改变网页结构 1.传统方法 document.write 和 innerHTML
1)document.write document对象的write()方法-吧字符串插入到文档里。
<body> <script> document.write("<h1>This is inserted.</h1>"); </script> </body>
example.js
function insertParagraph(text){ var str = "<p>"; str += text; str += "</p>"; document.write(str); }
<body> <script src="script/example.js"></script> <script> document.write("<p>This is inserted.</p>"); insertParagraph("This is inserted"); </script>
</body>
document.write缺点：违背了“行为应该与变现分离的原则”即使把document.write语句挪到外部函数里，还是需要在标记的<body>部分使用<scrip>标签才能调用那个函数。（但是实践发现可以只要不要在把语句放在链接.js文件的<script>语句里就行了） 应该尽可能的避免在<body>部分里用<scritp>便签，避免使用document.write方法
2.innerHTML属性 innerHTML属性可以用来读，写某给定元素里的HTML内容 标准化的DOM方法就像手术刀一样精细，innerHTML属性就像一把大锤那样粗放。 window.onload = function(){ var testdiv = document.getElementById("testdiv"); alert(testdiv.innerHTML); }
<body> <div id="testdiv"> <p>This is <em>my</em> content.</p> </div> </body> 运行后可以看出innerHTML属性的作用,会替换或添加一段HTML内容
window.onload = function(){ var testdiv = document.getElementById("testdiv"); testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>" }
@DOM方法
DOM是文档的显示。DOM所包含的信息与文档里的信息一一对应。我们要学会问使用正确的方法，就可以获取DOM节点书上任何一个节点的细节。 DOM是一条双向车道。不仅可以获取文档内容，还可以更新文档的内容。如果你改变了DOM节点树，文档在浏览器里呈现效果就会发生变化。（setAttribute方法可以改变DOM节点树上的某个属性节点，相关文档在浏览器里的呈现就会发生相应的变化，不过setAttribute方法为改变文档的物理内容。如果用文本编辑器而不用浏览器打开这个文档，看不到变化。这是因为浏览器时间显示的是那颗DOM节点树。在浏览器看来，DOM节点树才是文档。）
1) createElement 方法 document.createElement(nodeName) 创建一个p元素 document.createElement("p"); 但是也只是创建了一个元素节点，并没有将其嵌入DOM节点树中。这种情况下称为文档碎片，还无法显示在浏览器的窗口画面里。 window.onload = function(){ var para = document.createElement("p"); var info = "nodeName: "; info += para.nodeName; info += " nodeType: "; info += para.nodeType; alert(info); }
<body> <div id="testdiv"> </div> <script src="script/example.js"></script> </body> 证明新节点已经存在，并且有nodeName和nodeType属性
2).appendChild方法 把新创建的节点插入某个文档的节点树的最简单的方法是，让它成为这个文档某个现有节点的一个子节点。 语法： parent.appendChild(child) child就是刚才用createElement方法创建出来的。 想让创建出来的p元素成为testdiv元素的一个子节点： var para = document.createElement("p"); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para);
3).createTextNode方法 现在已经创建出了一个元素节点并把它插入了文档的节点树，这个节点是一个空白的p元素。你想把一些文本放进这个p元素内，可以用createTextNode方法来实现。 语法： document.createTextNode(text) 创建一个内容为helloworld的文本节点 document.createTextNode("hello world")
var text = document.createTextNode("hello world"); 现在这个文本节点还是一个文档碎片。让把他插入刚才创建的元素节点p里 para.appendChild(text);
最终的代码如下 1@.js文件 window.onload = function(){ var para = document.createElement("p"); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); var text = document.createTextNode("hello world"); para.appendChild(text); } 2@,html文件 <title>Test</title> <script src="script/example.js"></script> </head> <body> <div id="testdiv"> </div> </body> .js文件中创建的顺序可以改变 window.onload = function(){ var para = document.createElement("p"); var text = document.createTextNode("hello world"); para.appendChild(text); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); }
4).一个更复杂的组合 动态添加标记同上面的.js文件函数
3.重回图片库
function preparePlaceholder(){ var placeholder = document.createElement("img" ); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src",""); placeholder.setAttribute("alt","my image gallery"); document.getElementsByTagName("body")[0].appendChild("placeholder"); //可以用HTML-DOM提供的属性body //document.body.appendChild(placeholder); var description = document.createElement("p"); description.setAttribute("id","description"); var desctext = document.createTextNode("Choose an image"); description.appendChild("desctext"); document.getElementsByTagName("body")[0].appendChild(" description"); var gallery = document.getElementById("imagegallery"); gallery.parentNode.insertBefore("description","gallery"); }
@在已有元素前插入一个新元素 insertBefore()方法，这个方法将把一个新元素插入到一个现有元素的前面。在调用这个方式时，必须告诉它三件事： (1)新元素：你想插入的元素 (2)目标元素：你想把这个新元素插入到那个元素之前 (3)父元素：目标元素的父元素 语法： parentElement.insertBefore(newElement,targetElement) 因为目标元素的parentNode的属性值就是它
想让新创建的元素放到跟到图片清单后面（但是实际上并不是这样的） var gallery = document.getElementById("imagegallery"); gallery.parentNode.insertBefore("description","gallery");
@在已有元素后插入一个新元素 insertAfter()但是DOM并没有提供这个方法
1.编写insertAfter函数 function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement,nextSibling); } }
2.使用insertAfter函数 function preparePlaceholder(){//使用了新的DOM方法测试浏览器是否支持他们 if(!document.createElement)return false; if(!document.createTextNode) return false; if(!document.getElementById)return false; if(!document.getElementById("imagegallery"))return false; var placeholder = document.createElement("img" ); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src",""); placeholder.setAttribute("alt","my image gallery"); var description = document.createElement("p"); description.setAttribute("id","description"); var desctext = document.createTextNode("Choose an image"); description.appendChild("desctext"); var gallery = document.getElementById("imagegallery"); insertAfter(placeholder,gallery); insertAfter(description,placeholder); }
@4 Ajax 用于概括异步加载页面技术（不用加载整个页面）主要交互敏捷
