JavaScript 更改/添加/移除/读取元素属性值，innerHTML和innerText区别

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页名称</title>
  <style>


  </style>
</head>
<body>

  <div class="box"  id="kkk">

    hello


  </div>

  <div class="box"  id="eee"></div>


  <script>







var root = document.getElementById("kkk");

var root2 = document.getElementById("eee");


console.log(root.id);

root.id = "iiii";
root.className = "xxxx ccccc box";




//添加一个class
root.classList.add("mybox");

//移除指定class
root.classList.remove("box");

//判断元素是否有名为box1的class
if(root.classList.contains("box1")){
   console.log("有名为box1的class");
}else{
   console.log("没有名为box1的class");
};






//判断元素是否有名为ccccccc的class，如果有则移除，没有则添加
//没有
if(root.classList.toggle("ccccccc"));



//有
if(root.classList.toggle("xxxx"));



//读取
console.log(root.innerHTML);


//更改内容
console.log(root.innerHTML = "hello world");





//innerHTML和innerText区别


var link = "<a href='https://xn--xu0a.cn/'>维洛书签-羽.cn</a>";

//转换为超链接
root.innerHTML = link;

//输出为字符串
root2.innerText = link;







  </script>
</body>
</html>