jquery里怎么加入html源代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery里怎么加入html源代码相关的知识,希望对你有一定的参考价值。

比如
<div class="a1">
<div class="b">bbb</div>
<div class="c">ccc</div>
<div>
怎样在b和c这2个div间加</div><div class="a2">

让结果为
<div class="a1">
<div class="b">bbb</div>
</div>
<div class="a2">
<div class="c">ccc</div>
<div>
或者有没有其他思路能这样的,最好写点伪代码,谢谢大家

可以用楼上的方法,也可以用如下方式,
<div class="a1">
<div class="b">bbb</div>
<div class="c">ccc</div>
</div>
<script type="text/javascript">
<!--
$(function()
$(".a1").after("<div class='a2'></div>");
$(".a1 .c").appendTo($(".a2"));
)
-->
</script>

这两种方法都是jquery中的基本用法中的一种,
它还有很多方法在网上可以搜到jquery的帮助文档,有兴趣的话可以看看,它里面包括很多,
其中ajax和一些ui框架在我们做web开发时经常用到而且很方便追问

试过了,为什么 不能加到dom里面去

追答

那把dom变成包装集就行了啊,方式是$(dom元素),这样才能调用jquery封装的方法,如appendto、append、find等。dom元素是不能调用jquery为包装集写的方法的

参考技术A <div class="a1">
<div class="b">bbb</div>
<div class="c">ccc</div>
</div>
<script type="text/javascript">
<!--
$(function()
$("div").remove(".c");
$(".a1").after("<div class='a2'><div class='c'>ccc</div></div>");
)
-->
</script>追问

其实这样对我不适用,因为我的代码里,其实c里面的是很长一段代码,都是动态生成的,
$(".a1").after("ccc");,动态的这里改怎么处理?

追答


bbb
ccc

");
$(".c").clone(true).prependTo(".a2");
$(".a1").find(".c").remove();
)
-->

我复制进去这下OK了吧~

参考技术B 1.$(".demo").html("<span></span>")
2.var $span=$("<span></span>");
$(".demo").append($span)
参考技术C jQuery(".b").after('</div><div class="a2">');这样不就行了

layui的提交监听里怎么写jquery

本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/global.css">
</head>
<body>
参考技术A 以下是HTML代码
[pre]
<form action="" class="layui-form" >
                                  <div class="layui-form-mid">等级:</div>
                                  <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="grade" autocomplete="off" class="layui-input">
                                  </div>
                                  <div class="layui-form-mid">分销别名:</div>
                                  <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="alias" autocomplete="off" class="layui-input">
                                  </div>
                                  <!-- <div class="layui-form-mid">性别:</div>
                                  <div class="layui-input-inline" style="width: 100px;">
                                      <select name="sex">
                                          <option value="1">男</option>
                                          <option value="2">女</option>
                                      </select>     
                                  </div> -->
                                  <div class="layui-form-mid">分销比率:</div>
                                  <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="rate" autocomplete="off" class="layui-input">
                                  </div>
                                  <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
                                  <button class="layui-btn layui-btn-blue" lay-submit="" lay-filter="srchbtn" >查询</button>
                                </form>
[/pre]
<script src="../assets/js/jquery-1.11.3.min.js"></script>
    <script src="../assets/layui.all.js"></script>
    <!-- <script src="assets/layui.all.js"></script> -->
    <script>
        layui.use(['form', 'table'], function()
          var table = layui.table;
          var form = layui.form;
          form.on('submit(srchbtn)', function(data)
            //这里就可以写jQuery代码了
            console.log(data.field.grade+","+data.field.alias+","+data.field.rate);//当前容器的全部表单字段,名值对形式:name: value

            table.reload('agconf', 
              url: '../mgagent?reqt=1'
              ,where: 
                grade:data.field.grade
                ,alias:data.field.alias
                ,rate:data.field.rate
               //设定异步数据接口的额外参数
            );
            return false; 
          );
      );

有两个注意事项:
1、 form.on('submit(srchbtn)', function(data)中的   srchbtn 为  <button class="layui-btn layui-btn-blue" lay-submit="" lay-filter="srchbtn" >查询</button> 中的lay-filter的值
2、取form表单的值是:data.field.name      name为 input标签的中name对应的属性值:如<input type="text" name="alias" autocomplete="off" class="layui-input">那么
取值的代码为data.field.alisa

以上是关于jquery里怎么加入html源代码的主要内容,如果未能解决你的问题,请参考以下文章

jquery 实现加入购物车功能

如何用jQuery动态在某个DIV里写入HTML代码

加入购物车 jquery怎么实现

js或是jquery代码怎么写让图片在一个div里实现由远到近的渐变效果,即图片慢慢放大,超出div的部分不显示

jquery easyUI 的datagrid在html里能正常加载数据,但同样的代码,在asp.net里不能正常加载,这是怎么回事

在html里怎么样导入外部html文件