JavaScript 创建元素

一

<!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 id="kkk"></div>



  <script>
  //元素标签
var text =  document.createElement("p");
//文本内容
var wbnr = document.createTextNode("我是文本");
//创建id属性
var id = document.createAttribute("id");
//设置id属性值
id.value = "root";

//将文本内容放到标签中
text.appendChild(wbnr);

//将id属性放进标签中
text.setAttributeNode(id);


//通过id获取元素
var kkk = document.getElementById("kkk");
//将标签元素放到id为kkk的div中
kkk.appendChild(text);


/* 
//将上面的 将标签元素放到id为kkk的div中 注释掉才能放到body中
//获取body
var body = document.body;
//将标签元素放到body中
body.appendChild(text);
 */





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

二

//创建标签
var text = document.createElement("p");




//设置文本
var wb = document.createTextNode("文本");




//文本添加到标签中
text.appendChild(wb);




//设置属性
var sx = document.createAttribute("ssss");



//设置的属性值
sx.value = "zzzz";



//将属性添加到标签中
text.setAttributeNode(sx);




//打印到控制台
console.log(text);



//获取body元素
var body = document.body;

//将元素放到body中
body.appendChild(text);