动态创建标记的一些方法

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen_文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值