登录
原创

JavaScript-节点操作

发布于 2021-07-12 阅读 158
  • 前端
  • JavaScript
  • DOM
原创

三种动态创建元素的区别

  1. document.write()
  2. element.innerHTML
  3. document.creatElement()

区别:

  1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕后在执行它的话,它会导致页面全部重绘- - -页面其他内容没有了,只有新创建的内容
  2. innerHTML 是将内容写入某个 DOM 节点,不会导致页面重绘
  3. innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
  4. creatElement() 创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器下,innerHTML 效率要比 creatElement() 高

inn(erHTML 方式创建元素

innerHTML- - -给父元素添加内容,内容是以元素标签包含的。
eg:li.innerHTML = ‘<a href=“javascript:;”>删除</a>’;
这样添加了一个a标签

creatElement() 方式创建元素

①creatElement(‘标签名’)- - -创建空标签
②标签.innerHTML = ‘内容’- - -给标签赋予内容
③appendChild(新标签名)- - -添加元素到文档流中
eg:

<script>
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>';
        tr.appendChild(td);
</script>

添加节点:appendChild()

父元素.appendChild(子元素)

获取孩子节点

所有内容都是节点,包括换行
元素对象.childNodes- - -获取该元素下所有子节点,包括换行等
元素对象.children- - 获取子元素,不包括换行

删除子元素:removeChild()

父元素.removeChild(子元素)

获取父元素:parentNode

子元素.parentNode

评论区

零00
4粉丝

时光荏苒,我自清欢

0

0

0

举报