三大属性
属性 | 描述 |
innerHTML | 设置或返回元素内部的HTML结构与内容 |
innerText | 设置或返回元素内部的文本节点 |
outerHTML | 设置或返回自身HTML结构与内容 |
innerHTML属性声明了元素含有的HTML文本,不包括元素本身的开始标记和结束标记。innerText属性只能声明元素包含的文本内容,即使指定的是HTML文本,他也只会输出HTML文本的字符形式。outerHTML和前者类似,但是唯一不同的是它包含自身的开始标记和结束标记,最终替换的是整个目标节点,而不是目标内部节点结构。
案例代码
属性 | 说明 | 结果展示 | HTML代码 |
innerHTML | 插入格式 | li[1].innerHTML = '<li class="liElement">4</li>' | <ul id="ulElement"> <li class="liElement">1</li> <li class="liElement">2</li> <li class="liElement">3</li> </ul> |
变化 | 结果
结构 | ||
innerText | 插入格式 | li[1].innerText = '<li class="liElement">4</li>'; | |
变化 | 结果 结构 | ||
outerHTML | 插入格式 | li[1].outerHTML = '<li class="liElement">2</li>'; | |
变化 | 结果 结构 |