这是《JavaScript学徒》系列的第十一课，今天会进入《JavaScript DOM编程艺术》第7章，我们会一起学习如何用JavaScript动态创建标记。动态的意思是，在程式运行中创建标记，而不是在运行前就已经写好在index.html里面。之前，我们学习的是如何用JavaScript操作那些已经写好在index.html中的标记，现在我们要用JavaScript直接创建标记。
本文同步发表于我的个人网站：
https://zacklive.com/javascript-dom-create-element/
教学视频连结
传统方法
传统方法方法不建议使用，只需大概了解一下，以便遇到时，知道是做什么的。
document.write
document.write("<p>This is inserted.</p>")
innerHTML
innerHTML既可以读取，也可以写入（赋值），但只能取得整体，不能取得里面的标记。
window.onload = function() { var testdiv = document.getElementById("testdiv"); testdiv.innerHTML = "
I inserted this content.
"; alert(testdiv.innerHTML);}DOM方法
createElement
var para = document.createElement("p");alert(para.nodeName + ", " + para.nodeType);
appendChild
var testdiv = document.getElementById("testdiv");var para = document.createElement("p");testdiv.appendChild(para);
CreateTextNode
var txt = document.createTextNode("Hello world");para.appendChild(txt);
insertBefore
var gallery = document.getElementById("iamgegallery");gallery.parentNode.insertBefore(placeholder, gallery);
要插入到gallery前面，那便是在其父元素底下进行。
insertAfter
JavaScript不提供，自己写：
function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); }}
修改图片库例子
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }}function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); }}function preparePlaceholder() { 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", "https://via.placeholder.com/500x333"); placeholder.setAttribute("alt", "description"); 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);}function prepareGallery() { if (!document.getElementsByTagName || !document.getElementById || !document.getElementById("imagegallery")) return false; var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for ( var i=0; i
网友评论