jQuery使用append在html元素后同时添加多项内容的方法

本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法。分享给大家供大家参考。具体分析如下：

下面的代码可以同时在文本段落后添加多项内容

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
function appendText()
{
var txt1="<p>Text.</p>"; // Create text with HTML
var txt2=$("<p></p>").text("Text."); // Create text with jQuery
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // Create text with DOM
$("body").append(txt1,txt2,txt3); // Append new elements
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery+html5实现div弹出层并遮罩背景

    渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&

  • jquery获取及设置outerhtml的方法

    本文实例讲述了jquery获取及设置outerhtml的方法.分享给大家供大家参考.具体分析如下: 在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. 很多jQuery的使用者都对这一问题深感疑惑.为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢? 因为原生JS DOM里有一个内置属

  • 纯HTML5制作围住神经猫游戏-附源码下载

    纯HTML5制作围住神经猫游戏-附源码下载

    HTML5围住神经猫游戏网页版是一款基于HTML5.jquery.Typescript等技术制作的围住神经猫游戏. 先给大家附上演示和源码下载,点击这里  查看演示   下载源码 去年风靡微信朋友圈的小游戏"围住神经猫",我也试着做了一下.游戏是用Egret引擎开发的,因为Egret是用Typescript语言构建的,因此这里游戏也是用Typescript来开发的. 游戏规则: 点击画面上的灰色格子,慢慢将神经猫围起来抓住.如果猫到达游戏区边缘则游戏失败. 准备素材 在网上搜索&quo

  • jQuery实现的支持IE的html滑动条

    jQuery实现的支持IE的html滑动条

    复制代码 代码如下: <html> <script type="text/javascript" src="jquery.js"></script> <style> .d_b{     height: 20px;     width: 10px;     display: inline-block;     background-color: black;     position: relative;     ver

  • jQuery结合HTML5制作的爱心树表白动画

    HTML代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http

  • jQuery使用append在html元素后同时添加多项内容的方法

    本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法.分享给大家供大家参考.具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p&g

  • jQuery使用after()方法在元素后面添加多项内容的方法

    本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法.分享给大家供大家参考.具体分析如下: jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function af

  • JS实现隐藏同级元素后只显示JS文件内容的方法

    JS实现隐藏同级元素后只显示JS文件内容的方法

    本文实例讲述了JS实现隐藏同级元素后只显示JS文件内容的方法.分享给大家供大家参考,具体如下: 这里的demo.html文件在打开后会短暂显示与js文件同级的元素后马上隐藏这些元素,并显示同级的demo.js文件内容.具体代码如下: demo.html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title><

  • jQuery删除一个元素后淡出效果展示删除过程的方法

    本文实例讲述了jQuery删除一个元素后淡出效果展示删除过程的方法.分享给大家供大家参考.具体分析如下: 当我们删除一个元素时希望能看到删除的过程,这个效果通过对元素进行淡出展示动态化删除过程. $("#myButton").click(function() { $("#myDiv").fadeTo("slow", 0.01, function(){//fade $(this).slideUp("slow", function

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

  • JavaScript弹出新窗口后向父窗口输出内容的方法

    本文实例讲述了JavaScript弹出新窗口后向父窗口输出内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open方法打开一个弹出窗口,然后通过弹出窗口的句柄向父窗口输出信息的方法 <!DOCTYPE html> <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow

  • Angular实现点击按钮后在上方显示输入内容的方法

    Angular实现点击按钮后在上方显示输入内容的方法

    本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示输入内容</title> <script src="angu

  • jquery删除指定的html标签并保留标签内文本内容的方法

    例如有这样一段html代码: 复制代码 代码如下: 我们演示代码  <p>大家好,欢迎来到jb51.net</p>  这里为大家提供最优秀的<a href="http://www.jb51.net/js">js</a>代码和教程 我们希望删除这段html代码里面的一对<p>标签,但是要保持里面的内容不被删除,这里我们用jquery处理,详细的jQuery代码: 复制代码 代码如下: <script type="

  • jQuery判断元素上是否绑定了指定事件的方法

    本文实例讲述了jQuery判断元素上是否绑定了指定事件的方法.分享给大家供大家参考.具体如下: 例如下面的代码可以判断id=testdiv的元素是否绑定的click事件,这个判断只针对jQuery绑定的事件有效,普通JS的事件绑定无效. //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#testdiv").data("events"); if( $events &&

  • Java C++ 题解leetcode1619删除某些元素后数组均值

    Java C++ 题解leetcode1619删除某些元素后数组均值

    目录 题目要求 思路:模拟 Java C++ Rust 题目要求 思路:模拟 根据题意模拟即可: 排序然后只取中间符合条件的数加和然后计算均值: 根据给出的数组长度n为20的倍数,5%可直接取n/20: 两边各去除5%,则剩余长度为0.9n. Java class Solution { public double trimMean(int[] arr) { Arrays.sort(arr); int n = arr.length, tot = 0; for (int i = n / 20; i

随机推荐