动态创建标记的一些方法

1. document.write(str)：

        将str插入到文档中显示，不常用，因为结构，行为，表现不分离；

  var str = `<p> This is <em>my</em> content </p>`
  document.write(str)

2. dom.innerHTML属性，支持 read 和 write，会将原来节点中的内容全部替换；

 var testdiv = document.getElementById('testdiv')
 testdiv.innerHTML = "<p>This is <em>my</em> content. 使用JS动态插入的； </p>"
 console.log(testdiv.innerHTML)

3. document.createElement(node)：创建一个元素node

// 创建一个p的元素节点
let p = document.createElement('p')

 4. document.createComment('注释信息'): 创建一个注释信息节点；

 // 创建一个comment注释节点信息
 let comment = document.createComment('注释信息')
 document.body.appendChild(comment)

 

5. dom.appendChild(node)：向指定的dom节点中追加一个node元素；

6. document.createTextNode(text)：创建一个内容为text的文本节点；

7. parentElement.insertBefore(newEle, targetEle)：在目标元素targetEle之前插入一个新元素节点newEle；

8. 没有现成的insertAfter()，需要借助于insertBefore()方法自己实现；

/**
 * @description: 在目标节点targetElement后插入新节点newElement
 * @param {*} newElement：要插入的新节点；
 * @param {*} targetElement：目标节点；
 */
function insertAfter (newElement, targetElement) {
  // 获取目标节点的父元素节点
  let parentNode = targetElement.parentNode
  if(parentNode.lastChild == targetElement) {
    // 如果目标节点是父元素节点中最后一个节点，则直接将新节点追加到父元素节点中即可
    parentNode.appendChild(newElement)
  }else {
    // 如果目标节点不是父元素的最后一个节点，则将新节点插入到目标节点的下一个兄弟节点之前
    parentNode.insertBefore(newElement, targetElement.nextSibling)
  }
}

// 用dom操作实现相应的dom结构
// window.onload = function() {
//  创建一个p的元素节点
//   let p = document.createElement('p')
//   p.setAttribute('id', 'testp')
//   let em = document.createElement('em')
//   创建一个文本节点
//   let txt1 = document.createTextNode('This is ')
//   let txt2 = document.createTextNode(' my ')
//   let txt3 = document.createTextNode(' content ')
//   em.appendChild(txt2)
//   p.appendChild(txt1)
//   p.appendChild(em)
//   p.appendChild(txt3)
//   let div = document.getElementById('testdiv')
//   div.appendChild(p)
//   let h2 = document.createElement('h2')
//   let h2Text = document.createTextNode('我是追加到p节点后的H2节点；')
//   h2.appendChild(h2Text)
//   insertAfter(h2, p)
// }