JS或JQuery动态创建Html元素的一些方法
JS动态创建元素:
一、document.createElement
说明:在选定元素(父元素)内部的最后末尾追加创建新元素,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码;删除时,先获取父元素,使用父元素的remove方法;元素从DOM中删除,删除后,无法再获取。
//父元素
var jsDiv = document.getElementById("jsc");var p = document.createElement("p");
p.id = "newp1";
p.style.color = "red";
p.innerText = "html字符串直接生成";
jsDiv.appendChild(p);
二、document.write
说明:会覆盖整个页面上的内容,DOM结构存在新元素节点,可正常渲染显示,网页源码中无新内容的代码;
删除时,使用document.body.remove方法;元素从DOM中删除,删除后,无法再获取。
document.write("<h1 id='newp1'>document.write创建的元素</h1><button onclick='jsDel()'>js删除</button>");
三、标签元素.innerHTML
说明:会覆盖选定元素内部的所有内容,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码;
删除时,先获取父元素,使用父元素的remove方法;元素从DOM中删除,删除后,无法再获取。
//父元素
var jsDiv = document.getElementById("jsc");jsDiv.innerHTML = "<h2 id='newp1'>innerHTML方式</h2>";
四、删除元素方法示例
function jsDel() {var p = document.getElementById("newp1");console.log(p);jsDiv.removeChild(p);var p1 = document.getElementById("newp1");console.log(p1);}
JQuery动态创建元素
一、jquery对象
说明:在选定元素内部的最后末尾追加创建新元素,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码;
删除时,先获取父元素,使用父元素的remove或empty方法;元素从DOM中删除,删除后,无法再获取;
//父元素
var jqDiv = $("#jqc");//var p = $("<p id='newp2'>jquery html字符串直接生成</p>");//p.appendTo($("#jqc"));//p.appendTo(jqDiv); //子元素插入到父元素中jqDiv.append(p); //向父元素中插入子元素// jqDiv.append("<p id='newp2'>jquery html字符串直接生成</p>");//$("<p id='newp2'>jquery html字符串直接生成</p>").appendTo(jqDiv);
二、jquery.html方法
说明:会覆盖选定元素内部的所有内容,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码
删除时,先获取父元素,使用父元素的remove或empty方法;元素从DOM中删除,删除后,无法再获取;
var p = "<p id='newp2'>jquery html字符串直接生成</p>";
jqDiv.html(p);
三、jquery删除元素方法
remove:$(目标).remove(); //删除目标元素及内部的所有元素empty:$(目标).empty(); //删除目标元素内部的所有元素
四、jquery创建元素的其它方式
参考:https://blog.csdn.net/qq_27626333/article/details/51927022
1) prepend() 方法在被选元素的开头(仍位于内部)插入指定内容
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。
语法:$(selector).prepend(content)
content必需。规定要插入的内容(可包含 HTML 标签)。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").prepend("<b>Hello world!</b> ");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>
2) prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prepend() 能够使用函数来插入内容。
语法:$(content).prependTo(selector)
content 必需。规定要插入的内容(可包含 HTML 标签)。
selector 必需。规定在何处插入内容。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".btn1").click(function(){$("<b>Hello World!</b>").prependTo("p");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个 p 元素的开头插入文本</button>
</body>
</html>
3) after() 方法在被选元素后插入指定的内容
语法:$(selector).after(content)
content必需。规定要插入的内容(可包含 HTML 标签)。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").after("<p>Hello world!</p>");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>
4) before() 方法在被选元素前插入指定的内容
语法:$(selector).before(content)
content 必需。规定要插入的内容(可包含 HTML 标签)。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".btn1").click(function(){$("p").before("<p>Hello world!</p>");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>
5)insertAfter()把匹配的元素插入到另一个指定的元素集合的后面
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。
语法:$(content).insertAfter(selector)
content必需。规定要插入的内容。可能的值:选择器表达式、HTML 标记
selector必需。规定在何处插入被选元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("<span>你好!</span>").insertAfter("p");});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 span 元素</button>
</body>
</html>
6) insertBefore()把匹配的元素插入到另一个指定的元素集合的前面
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。
语法:$(content).insertBefore(selector)
content 必需。规定要插入的内容。可能的值:选择器表达式、HTML 标记
selector 必需。规定在何处插入被选元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("<span>你好!</span>").insertBefore("p");});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之前插入 span 元素</button>
</body>
</html>
JS或JQuery动态创建Html元素的一些方法相关推荐
- jQuery动态创建的元素无法删除?—— 事件委派找其静态父级
项目场景: 通过一个小案例学习事件委派时jQuery动态创建的元素无法移除. 问题描述 案例需要动态添加表格行,点击GET可以移除此课程.但是后来动态创建的tr无法移除. var newtr = $( ...
- js和jquery中创建标签添加属性的方法
js方式创建标签及添加属性 <script> var tr = document.getElementById('tr_id1') //根据id属性获取tr标签 var t ...
- js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
- Jquery的动态创建DOM元素
jquery动态创建页面元素,mark一下,以备以后查询时使用.以创建div和input为例. 动态创建div: $(function(){ $("<div>",{ i ...
- Java程序员从笨鸟到菜鸟之(八十七)跟我学jquery(三)jquery动态创建元素和常用函数示例
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些 ...
- 动态创建html元素的几种方法
可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 □ 使用jQuery动态创建元素追加到jQue ...
- JQuery动态创建Form
前言 JQuery 3.5.1 JQuery动态创建Form var form = $("<form></form>"); form.append($(&q ...
- jquery追加html后删除,jquery动态增加删除元素节点
jquery动态增加删除元素节点 对于语言编程,不同的思路有着不同的解决办法,Jquery对于动态的ul-li节点的增加删除实力操作思路: 1.做一个按钮用于增加li节点,使用Jquery:appen ...
- js动态修改html标签属性,通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
最新文章
- numpy教程:快速傅里叶变换模块numpy.fft
- 字符串扩展_JAVA
- Java开发专业通过swot分析岗位_掌起智能科技 | 你们要的安卓岗位来了,还有JAVA,技术经理等岗位...
- springboot获取静态图片路径_SpringBoot中的全局异常处理你确定你真的知道吗?
- WPF之ComboBox的VisualTreeHelper
- 飞机订票系统的html模板,飞机订票系统程序设计
- Jeecg 实现RESTful风格
- 在线证件照一键美化换底色,制作所属自己的证件照
- 怎样解决迅雷下载时的版权限制-两招解决迅雷下载版权限制
- mysql红黑联盟_MySQL - mysql数据库栏目 - 红黑联盟
- grpc报错rpc error:code=DeadlineExceeded desc = context deadline exceeded
- Golden Software BLN文件格式
- 书单|阿里、百度大咖联合强推的2018年必读好书清单
- 算法训练Day24 | 回溯算法理论基础;LeetCode77.组合(经典的回溯问题)
- php: RGB 转 HSB(HSV)
- 增量爬取电影网站2级详情页面电影名称和下载链接
- 一文搞懂底层mysql 索引那些事
- idea编译报错:Refer to the generated Javadoc files in ‘..\target\apidocs‘ dir. 解决
- Windows程序以特定用户身份运行
- python可以自动拆分表格吗_Python最详细的Excel操作方式,你值得拥有!
热门文章
- android电视自动关机,android实现自动关机的具体方法
- 南开大学python编程基础_《Python编程基础》20春期末考核(参考答案)南开大学 答案...
- 信息安全初窥(二):信息安全能力体系
- String.Split
- DSP主机 与 STM32从机 的SPI通信(待续)
- 数据分析进阶 - 使用Pyecharts搭建数据看板
- 电力电子技术实验-单相桥式全控整流电路实验
- stm32之定时器配置
- java 遍历map并比较值_Java遍历Map,List的不同方法,并比较其性能
- iOS_TUTK_多台设备同时连线卡UI问题