zoukankan      html  css  js  c++  java
  • 动态添加元素

    一、js 动态添加元素div

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id="parent"></div>
     
      function addElementDiv(obj) {
        var parent = document.getElementById(obj);
     
        //添加 div
        var div = document.createElement("div");
     
        //设置 div 属性,如 id
        div.setAttribute("id", "newDiv");
     
        div.innerHTML = "js 动态添加div";
        parent.appendChild(div);
      }

    调用:addElementDiv("parent");

    二、js 动态添加li

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ul id="parentUl"><li>原li</li></ul>
     
      function addElementLi(obj) {
        var ul = document.getElementById(obj);
     
        //添加 li
        var li = document.createElement("li");
     
        //设置 li 属性,如 id
        li.setAttribute("id", "newli");
     
        li.innerHTML = "js 动态添加li";
        ul.appendChild(li);
      }

    调用:addElementLi("parentUl");

    三、js 动态添加元素img

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <ul id="parentUl"></ul>
     
      function addElementImg(obj) {
        var ul = document.getElementById(obj);
     
        //添加 li
        var li = document.createElement("li");
     
        //添加 img
        var img = document.createElement("img");
     
        //设置 img 属性,如 id
        img.setAttribute("id", "newImg");
     
        //设置 img 图片地址
        img.src = "/images/prod.jpg";
     
        li.appendChild(img);
        ul.appendChild(li);
      }

    调用:addElementImg("parentUl");

  • 相关阅读:
    [AWS] Lab
    [AWS] Lab
    [AWS] Launch the VPC Wizard
    [AWS] EC2 Dashboard
    mysql .net下载
    币乎咕噜DeFi踩雷记
    量化分析师关于有限差分方法(FDM)最好的5本书
    QuantStart量化交易文集
    Exploring Market Making Strategy for High Frequency Trading: An Agent-Based Approach
    什么是信息比率?信息比率与夏普比率的差别?
  • 原文地址:https://www.cnblogs.com/niuniui/p/8592667.html
Copyright © 2011-2022 走看看