js元素创建的三种方式小白教程_元素菜鸟教程下载

元素创建的三种方式:1. document.write(“标签的代码及内容”);2. 对象.innerHTML=”标签及代码”;3. document.createElement(“标签的名字”); 1. document.write(“标签的代码及内容”);my$(“btn”).onclick = function () {document.write(“

js元素创建的三种方式小白教程

元素创建的三种方式:

1. document.write(“标签的代码及内容”);2. 对象.innerHTML=”标签及代码”;3. document.createElement(“标签的名字”);

 

js元素创建的三种方式小白教程_元素菜鸟教程下载

1. document.write(“标签的代码及内容”);

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

案例1:用documnet.write嵌入外部的代码内容(例子:百度新闻码)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style type=text/css>
    div {
      font-size: 12px;
      font-family: arial
    }

    .baidu {
      font-size: 14px;
      line-height: 24px;
      font-family: arial
    }

    a, a:link {
      color: #0000cc;
    }

    .baidu span {
      color: #6f6f6f;
      font-size: 12px
    }

    a.more {
      color: #008000;
    }

    a.blk {
      color: #000;
      font-weight: bold;
    }</style>
</head>
<body>

<script language="JavaScript" type="text/JavaScript"
        src="http://news.baidu.com/ns?word=x%20title%3Aiphone&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
</body>
</html>

2. 对象.innerHTML=”标签及代码”;

//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick = function () {
      my$("dv").innerHTML = "<p>床前明月光 疑是地上霜,举头望明月,低头思故乡</p>"
};

案例3:点击按钮创建列表,鼠标移过改变背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 250px;
      height: 350px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <input type="button" value="创建列表" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>

    var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "令狐冲"]
    var str = "<ul>";
    my$("btn").onclick = function () {
      //根据循环创建对应对数的li
      for (var i = 0; i < names.length; i++) {
        str += "<li>" + names[i] + "</li>";
      }
      str += "</ul>";
      my$("dv").innerHTML = str;

      //代码执行到这里,li已经有了
      //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
      var list = my$("dv").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
          this.style.backgroundColor = "hotpink";
        };
        list[i].onmouseout = function () {
          this.style.backgroundColor = "";
        };
      }
    };
  </script>
</body>

</html>

3. document.createElement(“标签的名字”);

创建元素:document.createElement(“标签名字”);对象把元素追加到父级元素中点击按钮,在div中创建一个p

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      border: 1px solid pink;
    }
  </style>
</head>

<body>
  <input type="button" value="创建p" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      //创建元素
      var pObj = document.createElement("p");
      pObj.innerText = ("这是一个p");
      // setInnerText(pObj, "这是一个p");
      //把创建后的子元素追加到父级元素中
      my$("dv").appendChild(pObj);
    };

  </script>
</body>

</html>

案例4:点击按钮,动态的创建列表,鼠标滑过高亮

如果是循环的方式添加事件,推荐用命名函数

如果不是循环的方式添加事件,推荐使用匿名函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid pink;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <input type="button" value="创建动态列表" id="btn" />
  <div id="dv"></div>
  <!-- <input type="button" value="创建列表" id="btn"/>
<div id="dv"></div> -->
  <script src="common.js"></script>
  <script>
    //点击按钮动态的创建列表,把列表加到div中
    var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经"];

    my$("btn").onclick = function () {
      //创建ul,把ul立刻加入到父级元素div中
      var ulObj = document.createElement("ul");
      my$("dv").appendChild(ulObj); //追加子元素
      //动态的创建li,加到ul中
      for (var i = 0; i < kungfu.length; i++) {
        var liObj = document.createElement("li");
        //设置li中间的文字内容
        liObj.innerHTML = kungfu[i];
        ulObj.appendChild(liObj);
        //为li添加鼠标进入和离开事件
        liObj.onmouseover = mouseoverHandle;
        liObj.onmouseout = mouseoutHandle;
      }
    };

    //此位置.按钮的点击事件的外面
    function mouseoverHandle() {
      this.style.backgroundColor = "hotpink";
    }
    function mouseoutHandle() {
      this.style.backgroundColor = "";
    }

  // 如果是循环的方式添加事件,推荐用命名函数
  // 如果不是循环的方式添加事件,推荐使用匿名函数

  </script>
</body>

</html>

 

案例5:点击按钮创建一个表格

自己给自己debug好久,才发现没有把创建的2个列放进for循环

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      border: 2px solid hotpink;
    }
  </style>
</head>

<body>
  <input type="button" value="创建表格" id="btn" />
  <div id="dv"></div>

  <script src="common.js"></script>
  <script>
    var arr = [
      { name: "百度", href: "http://www.baidu.com" },
      { name: "谷歌", href: "http://www.google.com" },
      { name: "优酷", href: "http://www.youku.com" },
      { name: "土豆", href: "http://www.tudou.com" },
      { name: "快播", href: "http://www.kuaibo.com" },
      { name: "爱奇艺", href: "http://www.aiqiyi.com" }
    ];

    //点击按钮创建表格
    my$("btn").onclick = function () {
      //创建table加入div
      var tableObj = document.createElement("table");
      tableObj.border = "1";
      tableObj.cellPadding = "0";
      tableObj.cellSpacing = "0";
      my$("dv").appendChild(tableObj);
      //创建行tr,加入table
      for (var i = 0; i < arr.length; i++) {
        var dt = arr[i]; //每个对象
        var trObj = document.createElement("tr");
        tableObj.appendChild(trObj);
        //创建第一个列,加入到行
        var td1 = document.createElement("td");
        td1.innerText = dt.name;
        trObj.appendChild(td1);

        //创建第二个列,加入到行
        var td2 = document.createElement("td");
        td2.innerHTML = "<a href="%20+%20dt.href%20+%20">" + dt.name + "</a>";
        trObj.appendChild(td2);
      }
    };

  </script>
</body>

</html>

 

 

海计划公众号
(0)
上一篇 2020/03/23 08:57
下一篇 2020/03/23 08:57

您可能感兴趣的内容

  • php中heredoc与nowdoc的使用方法、定界符<<<的使用方法指南攻略_方法使用说明

    一、heredoc结构及用法Heredoc 结构就象是没有使用双引号的双引号字符串,这就是说在 heredoc 结构中单引号不用被转义。其结构中的变量将被替换,但在 heredoc 结构中含有复杂的变量时要格外小心。其对格式化输出内容时,比较有用 。具体其有以下特点:1、开始标记和结束标记使用相同的字符串,通常以大写字母来写。2、开始标记后不能出现空格或多余

    2020/03/24
  • JS基础语法:分支语句之三元表达式入门百科_表达式小白攻略

    获取两个数字中的最大值用if-else语句var num1 = 10;
    var num2 = 100;
    if (num1 > num2) {console.log(num1);
    } else {console.log(num2);
    }两个分支,最终的结果是两个分支中的一个,像这种情况可以使用三元表达式 三元表达式,语法: * var 变量=表达式1?表达式

    2020/04/03
  • 你所忽略的js隐式转换基础教程_js知识小白常识

    你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。其实这篇文章初稿三个月前就写好了,在我读一些源码库时,遇到了这些基础知识,想归档整理下,就有了这篇文章。由于一直忙没时间整理,最近看到了这个比较热的题,决定把这篇文章整理下。const a

    2020/04/05
  • 十大技术趋势小白教程_技术菜鸟攻略

    变化是唯一不变的。这也适用于我们的职业生涯。如今技术发展非常迅速。 下面十大技术预计将在2020年获得巨大市场。人工智能区块链增强现实和虚拟现实认知云计算Angular和React开发运维物联网(IoT)智能应用程序大数据RPA(机器人过程自动化)RPA通常,任何行业中的任何桌面工作都涉及本质上是重复的并且可以自动化的任务。RPA或机器人过程自动化使您可以自

    2020/03/20
  • 关于JavaScript到底该如何学习?入门知识_学习指南教程

    1,不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到。没达到一定的武功水平,割了小JJ也学不会葵花宝典的。2,别急着加技术交流QQ群,加牛人QQ。如果你找张三丰交流武功,你上去第一句问“丰哥,where is 丹田?”,你会被他一掌劈死的。3,看网上什么多少天精通JS,啥啥啥从入门到精通,这种教程直接跳过吧,太多的事实证明,以一种浮躁的心

    2020/03/20
  • React Native之启动流程小白知识_流程小白常识

    JS 程序的入口,将当前 APP 对象注册到 AppRegistry 组件中, AppRegistry 组件是 js moduleimport { AppRegistry } from ‘react-native’…省略代码AppRegistry.registerComponent(‘demo’, () => Index)启动流程我们新建一个RN的项目,

    2020/03/23
  • js原生拖放实现基础知识入门_拖放使用帮助

    定义事件操作工具let EventUtil = new Object;
    /*此方法用来给特定对象添加事件,oTarget是指定对象,sEventType是事件类型,如click、keydown等,fnHandler是事件回调函数*/
    EventUtil.addEventHandler = function (oTarget, sEventType, fnHa

    2020/03/29
  • BeautifulOpen使用指南_由GroupOn开发团队开放的免费开源JS库集合

    BeautifulOpen基础知识 官方网址:http://beautifulopen.com/ 简介描述:由GroupOn开发团队开放的免费开源JS库集合 BeautifulOp…

    2020/03/06
  • <input type=file>文件上传零基础入门_input指南教程

    type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用input属性:accept:指示file类型,没有时表示不限制类型,填入格式后选择文件时只能看见被允许的文件accept=”image/png” 或 accept=”.pn

    2020/03/23
  • StaggeringBeauty入门基础_提高你的注意力,睁大你的眼睛

    StaggeringBeauty入门基础 官方网址:http://www.staggeringbeauty.com/ 简介描述:提高你的注意力,睁大你的眼睛 别以为它只是一只会飘动…

    2020/03/08
  • jQuery.toTop 小白基础一款轻量级的 jQuery 返回顶部插件

    jQuery.toTop菜鸟指南 官方网址:http://mmkjony.github.io/jQuery.toTop/ GitHub:https://github.com/mmk…

    2020/03/06
  • Vue父子组件传值(复杂数据类型的值)使用说明_组件入门基础教程

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean,当父组件值被修改时,子组件能够实时的作出改变。如果父子传值的类型是复杂数据类型(object,array)这种时1.通常的做法是在子组件监听props属性
    <

    2020/03/26
  • Vue.use到底是什么?菜鸟知识_vue教程视频

    我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。其实这些轮子都可以称之为插件,它的功能范围没有严格的限制,一般包含如下几种:添加全局方法或者属性。如: vue-custom-element添加全局资源:指令/过滤器/过渡/组件等。如 vue-touch通过全局混入

    2020/03/20
  • Winds攻略教程_开源高颜值 RSS/Podcast 阅读器

    Winds攻略教程 官方网址:https://getstream.io/winds/ GitHub:https://github.com/getstream/winds 简介描述:…

    2020/03/08
  • 签名你的每个 Git Commit入门基础_git使用帮助

    好久没有写代码提交 GitHub 了,真是惭愧!回到正题,今天提交了一个代码,冷不丁发现,在我的 Commit 记录里面,有一条被打上了 Verified 标记。原来 GitHub 的 Commit 支持签名验证了,我可以对每一个我的 Commit 进行签名(Commit Signature),这样,GitHub 的其他用户就知道这个“提交”来自一个可以信任

    2020/03/22
  • Jupyter菜鸟教程_在线交互计算笔记本

    Jupyter菜鸟教程 官方网址:http://jupyter.org/ 简介描述:在线交互计算笔记本 「Jupyter Notebook」是一个以网页的形式打开,可以在网页页面中…

    2020/03/10