JS DOM innerHTML outerHTML - Kaiqisan

JS DOM innerHTML outerHTML

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである，今天没有开场白，直接进入主题。

这个还是很好理解的innerHTML获取或设置当前节点内部的所有内容

<div claas="demo">
    <p>apppp</p>
</div>

let a = document.getElementsByClassName('demo')[0]
console.log(a.innerHTML);
// 输出 
//     <p>apppp</p>

// 当然，这包含换行符和所有空格，它的类型当然是string

所以，在使用原生的js来模拟vue的组件功能的时候，这个innerHTML可以给你最大的便利，因为它即可查看，又可修改，传入字符串就可以修改了

let a = document.getElementsByClassName('demo')[0]
a.innerHTML = 'xxxxxxxxxxxxxx'

您既可以传入字符串，形参，也可以写入HTML标签，到时候，所有的内容都会转化为HTML代码，按照一致的标准编译。

<div claas="demo">
    <p>apppp</p>
</div>

let a = document.getElementsByClassName('demo')[0]
a.innerHTML = '<div style="color:#fffaaa;">hhh</div>'

修改完成之后的HTML代码

<div claas="demo">
    <div style="color:#fffaaa;">hhh</div>
</div>

您这么写试试看，保证是您想要的效果。况且webstorm也会自动识别您在使用innerHTML来编辑，也会有各种提示代码来帮助您撰写代码。（广告费（不是））

innerHTML模拟vue的for循环复制组件

let Obj = [
    {
    
    
        name: 'Kaiqisan',
        uid: 1001
    },
    {
    
    
        name: 'tom',
        uid: 2000
    },
    {
    
    
        name: 'admin',
        uid: 100
    }
]
let htmlCont = ''
Obj.forEach(item => {
    
    
    htmlCont += `<div>
	<span>姓名：${
      
      item.name}</span>---<span>uid：${
      
      item.uid}</span>
</div>`
})
let a = document.getElementsByClassName('inner_list')[0]
a.innerHTML = htmlCont

复制代码，然后打开浏览器，自己感受！

---

outerHTML:这个属性可以获取和修改当前的整个节点的内容。修改形式同上

<div claas="demo">app</div>

let a = document.getElementsByClassName('demo')[0]
a.outerHTML = '<div claas="app" style="color:#fffaaa;">hhh</div>'

修改之后

<div claas="app" style="color:#fffaaa;">hhh</div>

总结

两种方法有些许的区别，但是在原理上它们都是完全一样的，看情况选择使用。

扫描二维码关注公众号，回复： 11853262 查看本文章