js中标签的创建

第一种创建方法(页面加载完成后,页面代码将会被覆盖)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
娃哈哈
<div id="dv"></div> <script> //document.write("标签代码及内容");

     my$("btn").οnclick=function () {
    document.write("<p>这是一个p</p>");
   };

  my$("btn").οnclick=function () {
    document.write("<p>这是一个p</p>");
  };
 // document.write("<p>这是一个p</p>");

  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉


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

 第二种创建的方式

<script>
  //点击按钮,在div中创建一个p标签
  //第二种方式创建元素: 对象.innerHTML="标签代码及内容";

  my$("btn").οnclick=function () {
    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
  };
</script>

 第三种创建的方式

//第三种方式创建元素
  //创建元素
  //document.createElement("标签名字");对象
  //把元素追加到父级元素中
  //点击按钮,在div中创建一个p

  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };
  //设置任意元素的中间的文本内容
  function setInnnerText(element,text) {
  if(typeof element.textContent=="undefined"){
  element.innerText=text;
  }else{
  element.textContent=text;
  }
  }

  

  

转载于:https://www.cnblogs.com/liushisaonian/p/9343713.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值