简单:

①,js中:

 (function () {

     var box=document.querySelector("#box");

     var con1=document.createElement("div");

     box.appendChild(con1);

 })();

②,jQuery中:

 $(function () {

     var con1="<div></div>";

     $("#box").append(con1);

 });

进化:

实现向ul中添加节点3个li,且每个li中还有四个div,即

①,js(进化)

 (function () {

     var box = document.querySelector("#box");

     for (var i = 0; i < 3; i++) {
var li = document.createElement("li");
box.appendChild(li);
for (var j = 0; j < 4; j++) {
var div = document.createElement("div");
li.appendChild(div);
}
}
})();

js(超进化)

 (function () {

     var box = document.querySelector("#box");
var liString = "<li><div></div><div></div><div></div><div></div></li>"; for (var i = 0; i < 3; i++) {
box.innerHTML += liString;
} })();

这样的好处:加快了页面加载的速度,毕竟少了个循环╮(╯▽╰)╭

注意点:这里是innerHTML+= 不是innerHTML=,原因:innerHTML的意思是“替换”不是“添加”,如果写成=,那么会只有一个li

js(超级进化)

 (function () {

     var box = document.querySelector("#box");
var style = document.querySelector("#style");
var liString = "", liStyle = ""; for (var i = 0; i < 3; i++) {
liString += "<li><div></div><div></div><div></div><div></div></li>";
liStyle += "#box li:nth-child(" + i + ") {background:#abcedf}"
}
box.innerHTML = liString;
style.innerHTML += liStyle; })();

这里在Html中写了,在<style>标签里面添加了id=“style”

好处:结合nth-child选择器 实现了动态为每个li添加背景。

②,jQuery(进化)

 $(function () {

     var li = $("<li></li>");
var div = $("<div></div>"); for (var i = 0; i < 3; i++) {
var oli = li.clone();
oli.addClass("dd");
$("#box").append(oli);
for (var j = 0; j < 4; j++) {
var odiv=div.clone();
oli.append(odiv);
}
}
});

jQuery(黑暗进化)

 $(function () {

     var liString = "";
for (var i = 0; i < 3; i++) {
liString += "<li><div></div><div></div><div></div><div></div></li>";
} $("#box").innerHTML = liString; });

以上代码通过模仿js而写,会发现没有任何效果,并且不报错。呵呵了

(正如数码宝贝,太一急切想让亚古兽进化,结果黑暗进化了。。。)

JQuery(超级进化)

 $(function () {

     var liString = "";
for (var i = 0; i < 3; i++) {
liString += "<li><div></div><div></div><div></div><div></div></li>";
} $("#box")[0].innerHTML = liString; });

如代码,终于正常进化了,学习亦如此,不要急于求成。

这里,说明一下,innerHTML的行使对象应该是标签,而不是节点,即应该是document.querySelector获取到的,而不是$()获取到的

思维联想,html新增的标签audio,通过js控制其开始暂停,行使对象也是标签,不是对象,详情看一下网页。

http://zhidao.baidu.com/link?url=qiuaU30c7BrJDQnuC7E_vP2A2KhCkM1iKaCQA_tXwzNm4M97zOLZABRXvFDGtGV02LTa-EiEZ864OMbiSXeofg3xD3Jl3cVccO38SmP-iR7

向html中添加节点的更多相关文章

  1. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  2. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  3. 基于react可无限向内部添加节点的tree

    这两天学习react,撸了一遍文档后开始自己动手写点东西. 正好从朋友那得到灵感,写一个小例子. 这个东西是这样的,就是点击的这个节点就往它里面添加一个child. 于是乎!我想到的就是用自调函数,递 ...

  4. 向CDH5集群中添加新的主机节点

    向CDH5集群中添加新的主机节点 步骤一:首先得在新的主机环境中安装JDK,关闭防火墙.修改selinux.NTP时钟与主机同步.修改hosts.与主机配置ssh免密码登录.保证安装好了perl和py ...

  5. redis cluster中添加删除重分配节点例子

    redis cluster配置好,并运行一段时间后,我们想添加节点,或者删除节点,该怎么办呢. 一,redis cluster命令行     //集群(cluster)  CLUSTER INFO 打 ...

  6. python、java实现二叉树,细说二叉树添加节点、深度优先(先序、中序、后续)遍历 、广度优先 遍历算法

    数据结构可以说是编程的内功心法,掌握好数据结构真的非常重要.目前基本上流行的数据结构都是c和c++版本的,我最近在学习python,尝试着用python实现了二叉树的基本操作.写下一篇博文,总结一下, ...

  7. [简洁]JavaScript中添加、移除、移动、复制、创建和查找节点元素

    查找: document.getElementsByTagName通过标签名获取元素,不论有多少个都返回元素集合. document.getElementsByClassName通过类名获取元素,同上 ...

  8. Step by step 活动目录中添加一个子域

    原创地址:http://www.cnblogs.com/jfzhu/p/4006545.html 转载请注明出处 前面介绍过如何创建一个域,下面再介绍一下如何在该父域中添加一个子域. 活动目录中的森林 ...

  9. 如何在ASP.NET的web.config配置文件中添加MIME类型

    常常有一些特殊的MIME类型是IIS中没有的,一般来说要我们自己手动添加.如果网站经常更换服务器或者网站代码是提供给多个用户使用,那么会造成网站中用到的特殊的MIME类型要经常性的在IIS上配置.这里 ...

随机推荐

  1. Ecplise软件Devices看到两个相同设备问题

    Ecplise软件Devices看到两个相同设备问题 在使用过程中,连接一台设备,在Ecplise软件的Devices界面下突然看到2个设备,如下图: 图1 解决方案:先 kill-server, 再 ...

  2. 在Quartus II中分配管脚的两种常用方法

    在Quartus II中分配管脚的两种常用方法 示范程序 seg7_test.v 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /* * ...

  3. C++,利用链式栈实现括号匹配,界面友好,操作方便,运行流畅

    #include<iostream> #include<string> using namespace std; struct Node { char ch; Node* ne ...

  4. FreeSWITCH 1.6关于视频通话的一些测试

    简单的测试了一下,暂时没把精力放到这一块. ① 视频编码透传的设置(使用代理模式). 修改internal.xml文件的以下参数: <param name="inbound-proxy ...

  5. 超强vim配置

    在网上找vim的配置,自己配置的特别丑 安装起来也超级方便. #!/bin/bash echo "安装将花费一定时间,请耐心等待直到安装完成^_^" if which apt-ge ...

  6. HDU 5818 Joint Stacks(联合栈)

    HDU 5818 Joint Stacks(联合栈) Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  7. hdu 5673 Robot 卡特兰数+逆元

    Robot Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem D ...

  8. hdu 1568 Fibonacci 快速幂

    Fibonacci Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Proble ...

  9. 不要温柔地走入AMD

    1.无依赖情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. NYOJ 128 前缀式计算

    前缀式计算 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 先说明一下什么是中缀式: 如2+(3+4)*5这种我们最常见的式子就是中缀式. 而把中缀式按运算顺序加上括 ...