js 节点操作--创建图片相册（two methds）

最新推荐文章于 2023-11-11 10:24:02 发布
最新推荐文章于 2023-11-11 10:24:02 发布
阅读量2.3k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angtoutianwai/article/details/8805990
版权

方法一：

  <style type="text/css">
    Image
    {
        width:100px;
        height:100px;
        }
    </style>
    <script type="text/javascript">
        function createimgs() {
            var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',
            '3615bd55e6db2d3eb2a45a8369653f12(1).jpg',
            '3615bd55e6db2d3eb2a45a8369653f12.jpg',
            '837adad119910d349f05149ad4a02ef0.jpg',
            '849b23dac9ceafe6d7e7b94a73b46e82.jpg',
            '91fe451f6e8081fe492c6ae617a50274.jpg',
            '9b1b7be8d60eef1e15257797d779d91b.jpg',
            '9fce9273034aed88fab0bcfef344dae7.jpg',
            'a5f59f9d670a936bf8281090bc2ce7c7.jpg',
            'cda8a8f5b72e165c153fd396db02ab64.jpg',
            'd159717ab855f729066b333d439f630e.jpg',
            'd7ef1897c62640dba44532e6475c49c6.jpg',
            'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg',
            'f6b31d9bca975794bd23fdf71295e1c4.jpg',
            'f856bd37b432eb532098fa170dfbafd4.jpg'
            ];
            //alert(array.length);
            var tablenode = document.createElement('table');
            var tbody = document.createElement('tbody');
            tablenode.setAttribute('width', '600px');
            tablenode.setAttribute('height', '400px');
            tablenode.setAttribute('border', '2px');
            var count=0;
            for (var i = 0; i < 3; i++) {
                var trnode = document.createElement('tr');               
                for (var j = 0; j < 5; j++) {
                    var tdnode = document.createElement('td');
                    var imgnode = document.createElement('img');
                    imgnode.setAttribute('src', 'images/' + array[count]);
                    tdnode.appendChild(imgnode);
                    trnode.appendChild(tdnode);
                    count++;
                }
                tbody.appendChild(trnode);
            }
            tablenode.appendChild(tbody);
            document.body.appendChild(tablenode);
        }
    </script>
</head>
<body>
<input type="button" value="创建相册" οnclick="createimgs();" />
</body>

 

方法二：

注释：节点操作包括了 替换节点和删除节点

  <style type="text/css">
    Image
    {
        width:100px;
        height:100px;
        }
    </style>
    <script type="text/javascript">
        function addNodes() {
         var node = document.createElement("img");
         node.setAttribute("src", "imgs/2.jpg");
      node.setAttribute("width","200px");
      document.body.appendChild(node);
        }
       
        function addimgNodes() {
            var tablenode = document.createElement('table');
            var tbody = document.createElement('tbody');
            tablenode.setAttribute("border", "1px");
            tablenode.setAttribute("width", "500px");
            tablenode.setAttribute("height", "300px");
            var trnode;var tdnode;var j = 0;
            for (var row = 0; row < 3; row++) {
                trnode = document.createElement('tr');
                trnode.setAttribute("width", "100px");
                trnode.setAttribute("Color", "red");
                tablenode.appendChild(trnode);
             for (var cell = 1; cell < 6; cell++) {
                 j++;
                    tdnode = document.createElement('td');
                    trnode.appendChild(tdnode);         
               var imgNodes = document.createElement("img");
               imgNodes.setAttribute("src", "scenery/" + j + ".jpg");
               tdnode.appendChild(imgNodes);
                   
                }             
               
                 tbody.appendChild(trnode);

       }
               tablenode.appendChild(tbody);
               document.body.appendChild(tablenode);

           }
           //替换节点
           function ReplaceNode() {
               var reimgnode = document.getElementsByTagName("img")[8];
                var tdnode = document.createElement("img");
                tdnode.setAttribute("src","imgs/2.jpg");
              reimgnode.parentNode.replaceChild(tdnode,reimgnode);//通用的
        }
        //删除节点
        function RemoveNode()
        {
           var reimgnode = document.getElementsByTagName("img")[11];
           reimgnode.parentNode.removeChild(reimgnode);
          
        }
      
     
        <!--//相册方法二创建表格-->

        function createimgs() {
            var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',
            '3615bd55e6db2d3eb2a45a8369653f12(1).jpg',
            '3615bd55e6db2d3eb2a45a8369653f12.jpg',
            '837adad119910d349f05149ad4a02ef0.jpg',
            '849b23dac9ceafe6d7e7b94a73b46e82.jpg',
            '91fe451f6e8081fe492c6ae617a50274.jpg',
            '9b1b7be8d60eef1e15257797d779d91b.jpg',
            '9fce9273034aed88fab0bcfef344dae7.jpg',
            'a5f59f9d670a936bf8281090bc2ce7c7.jpg',
            'cda8a8f5b72e165c153fd396db02ab64.jpg',
            'd159717ab855f729066b333d439f630e.jpg',
            'd7ef1897c62640dba44532e6475c49c6.jpg',
            'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg',
            'f6b31d9bca975794bd23fdf71295e1c4.jpg',
            'f856bd37b432eb532098fa170dfbafd4.jpg'
            ];
            //alert(array.length);
            var tablenode = document.createElement('table');
            var tbody = document.createElement('tbody');
            tablenode.setAttribute('width', '600px');
            tablenode.setAttribute('height', '400px');
            tablenode.setAttribute('border', '2px');
            var count=0;
            for (var i = 0; i < 3; i++) {
                var trnode = document.createElement('tr');               
                for (var j = 0; j < 5; j++) {
                    var tdnode = document.createElement('td');
                    var imgnode = document.createElement('img');
                    imgnode.setAttribute('src', 'images/' + array[count]);
                    tdnode.appendChild(imgnode);
                    trnode.appendChild(tdnode);
                    count++;
                }
                tbody.appendChild(trnode);
            }
            tablenode.appendChild(tbody);
            document.body.appendChild(tablenode);
        }
        </script>
</head>
<body>
    <input id="Button1" type="button" value="添加节点" οnclick="addimgNodes()" />
    <input id="Button2" type="button" value="替换节点" οnclick="ReplaceNode()" />
    <input id="Button3" type="button" value="删除节点" οnclick="RemoveNode()" />
</body>

 

liang_jqzd
关注
专栏目录
JavaScript----DOM基础知识（二）——节点关系
yufanhui的博客
07-11 303
JavaScript----DOM基础知识（二）--节点我们知道DOM将HTML或XML文档描绘成了一个具有层次化的节点树，节点又分为几种不同的类型，每种类型用来记录文档中不同的信息，而每个节点又都拥有各自的特点、属性、方法，而且也与其他节点存在着关系。证实这种节点与节点之间的关系，构成了层次。文档元素是文档的外层元素，文档中的其他所有元素都包含在文档元素中。每个文 档只能有一个文档元素。在 HT...
js---点击radio按钮实现图片轮换（two methds）
昂头天外
04-15 2446
方法一：                   function UpdateImg() {                        var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮             for (var i = 0; i
js实现点击按钮更换图片，用的创建元素节点方法
wocao2dai的博客
08-30 693
这个有使用： -------------新增节点createElement('标签名')方法； -------------插入节点A.appendChild(B),把B节点追加至A节点的末尾。 -------------修改节点replaceChild(新节点，被替换节点) 具体代码实现： 需要更换图片，不然看不到图片。 鼠标悬停在图片上，可以看目前图片是第几张。 <!DOCTYPE html> <html lang="en"> <head> &l
JS 创建相册 替换相册
qhx556的专栏
04-16 533
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">             Image     {         width:100px;         height:100px;         }                 f
js创建一个节点（以img为例）
Blog
01-26 1万+
&lt;div id="d1"&gt;&lt;/div&gt; HTML function a(){ document.getElementById("d1").innerHTML="&lt;img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'&gt;"; } a(); 方法 function b(){ va..
创建带节点图片的CTreeCtrl控件
cyxvc
10-12 539
创建带节点图片的CTreeCtrl控件
03-Vue-事件
m0_57103348的博客
08-30 146
b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法。-- 其他盒子只有@click时候。默认冒泡阶段触发，现在是捕获阶段触发。//后面学的差不多了回头补充:高薪面试题 底层设计:js的语法 definexxx 设计模式:发布订阅。方法的写法:由于是做了es6语法处理的 所以学过的所有方式的写法都行。a.方法和ES5的函数中的this是vm对象。(4)事件中的this与数据操作(面试)//a.修改内存data容器中的数据。(3)事件修饰符(面试)...
Ruby学习笔记（一）---初识Ruby
卢楷方的博客
06-14 929
近日，了解到一门叫做Ruby的脚本语言，一门由日本工程师发明的，面向对象的语言。 简介 Ruby是一种功能强大的面向对象的脚本语言，可以使用它方便快捷地进行面向对象程序设计。与Perl类似，而且Ruby具有强大的文本处理功能，使文本处理变得简单。此外还可以方便地使用C语言来扩展Ruby的功能。 特点 Ruby被称为 “最快的开发语言” ，初步了解，Ruby有以下特点： 解释型执行，方便快捷 Ruby是解释型语言，其程序无需编译即可执行。 语法简单、优雅 语法比较简单，类似Algol系语法。 完全
vue（四）[父子组件的操作]
weixin_44893500的博客
04-07 298
父子组件父组件引入子组件子组件传值给父组件子组件调用父组件的方法父组件传值给子组件父组件调用子组件的方法整理的例子代码父组件代码子组件 父组件引入子组件 import zi from "../components/zi"; export default { components: { zi } }; <div> <!-- 使用子组...
vue3中setup用法与methods用法踩坑
m0_67393827的博客
03-09 1414
vue3 使用element-plus Dialog踩坑记录之methods用法与setup用法 Element Dialog最原始的调用 1.在methods()中踩的坑 2.在setup()中踩的坑 Element Dialog最原始的调用 复制过来的代码可以直接把dialog弹出来 <template> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button&
流程图节点图 js html
热门推荐
云
04-19 5万+
【代码】流程图节点图 js html。
Litegraph.js节点图引擎【低代码开发利器】
最新发布
新缸中之脑
11-11 1167
非常简单！定义一个类，实现约定的接口，然后用 registerNodeType 方法注册节点即可！A = 0;B = 0;return a+b;
D3.JS绘制力拓扑图（高亮显示节点+图例显示+缩放+拖拽）
qq_39360565的博客
09-23 6116
D3.JS绘制力拓扑图（高亮显示节点+图例显示） 1. 效果图（部分） 原始状态不显示线上的文字。 当鼠标放在节点上时，会触发监听事件，高亮显示相关节点，并显示相关连线上的文字。 2.需要的js文件 <script type="text/javascript" src="JS/d3.v4.js"></script> <script type="text/javas...
JS-HTML:DOM节点关系图
xiaye_go的博客
09-23 1765
一.HTML中节点间的关系 (1).例子:一个div继承路线:HTMLDivElement---HTMLElement---Element---Node---EventTarget---Function---Object 如图:
细节：js DOM 节点层次示意图
weixin_33774308的博客
12-11 205
JS_Canvas绘制通信网络结点
Mr.White的博客
04-14 1115
JS_Canvas绘制通信网络结点实现效果基础知识Canvas画圆Canvas画线思路生成随机结点点击连线总代码 实现效果 通过画布绘制通信网络节点分布示意图，并能实现节点间通信链路的连线，即点击添加结点按钮可以随机生成结点，单击任意两个结点完成连线 canvas菜鸟教程： https://www.runoob.com/html/html5-canvas.html 基础知识 Canvas画圆 var c = document.getElementById("myCanvas"); var ctx = c.
创建节点 （HTML5）
下午茶的博客
10-10 902
效果图： 代码如下： html> html lang="en"> head> meta charset="UTF-8"> title>创建节点title> script src="jquery.1.12.4.js">script> script> $(function () { $("button").clic
JavaScript Create Img 元素
weixin_30617797的博客
11-18 174
var divImgtmp = document.getElementById('divImg'); var imgTmp = document.createElement("img"); try{ divImgtmp.removeChild(divImgtmp.childNodes[0]);...
JS中创建、添加、删除节点
XXH3L的博客
09-25 1276
createElement()：创建节点 appendChild()：添加节点（还有一个很相似的 inertBefore()：插入节点，两个参） removeChild()：删除节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 创建，添加，删除节点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值