改变 Html 的常用方式

  • 改变 Html 内容(innerHTML)
  • 改变 Html 属性(getAttribute)(setAttribute)

1.改变 Html 内容

document.getElementById(id).innerHTML=新的 HTML

备注：此方法可能改变 html 的结构，如果获取的元素下没有子元素，则更改的是具体文本值

Html 代码：

<div id="idName">
    <p class="class-name" data="我是 data 文本">我是 p 元素，class 值为 class-name</p>
</div>
JavaScript代码：

var dom1=document.getElementsByClassName("class-name")[0].innerHTML="你好";

2.Html 属性值

获取属性值：getAttribute(“属性”)

var dom1=document.getElementsByClassName("class-name")[0].getAttribute("data")

修改属性值：setAttribute("属性名","修改的值")

var dom1=document.getElementsByClassName("class-name")[0].setAttribute("data","我是修改的 data 值");