《JavaScript DOM编程艺术》11：动态创建标记

这是《JavaScript学徒》系列的第十一课，今天会进入《JavaScript DOM编程艺术》第7章，我们会一起学习如何用JavaScript动态创建标记。动态的意思是，在程式运行中创建标记，而不是在运行前就已经写好在index.html里面。之前，我们学习的是如何用JavaScript操作那些已经写好在index.html中的标记，现在我们要用JavaScript直接创建标记。

本文同步发表于我的个人网站：

https://zacklive.com/javascript-dom-create-element/

教学视频连结

YouTube

微博

传统方法

传统方法方法不建议使用，只需大概了解一下，以便遇到时，知道是做什么的。

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