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)
// }