首页 > 其他分享 >jQuery HTML之添加元素

jQuery HTML之添加元素

时间:2023-04-26 20:33:27浏览次数:38  
标签:jQuery function text3 HTML var 添加 hello append

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-3.4.1.min.js"></script>
    <script src="AddContent.js"></script>
</head>
<body>
    <p id="p1">hello world</p>
    <p id="p2">hello world</p>
    <button id="btn1"></button>
    <button id="btn2"></button>
    <button onclick="appendText()">按钮</button>
</body>
</html>
$(document).ready(function () {
    $("#btn1").click(function () {
        $("#p1").append("this is my webpage add content, "); //不换行
        $("#p1").append("this is my webpage add content, ");
    });
    $("#btn2").click(function () {
        $("#p2").before("hello");//换行
        $("#p2").after("hello");
    });
});

function appendText() {
   /**
    * Html、Jquery、DOM三种方式追加内容
    */
    var text1 = "<p>iwen</p>";
    var text2 = $("<p></p>").text("ime");//找到text添加内容
    var text3 = document.createElement("p");
    text3.innerHTML = "acely";
    $("body").append(text1, text2, text3);//追加到body中

}

 

标签:jQuery,function,text3,HTML,var,添加,hello,append
From: https://www.cnblogs.com/Mandy-ZQ-Ma/p/17357194.html

相关文章

  • npm、node本地启动服务访问静态html
    1.使用express启动服务安装expressnpmiexpress--save新建app.js启动命令文件varexpress=require('express');varpath=require('path');varapp=express();app.use(express.static(path.join(__dirname,'public')));varserver=app......
  • yum 安装的nginx 添加其他模块 stream
    需求:生产有个接口是通过socket通信。nginx1.9开始支持tcp层的转发,通过stream实现的,而socket也是基于tcp通信。实现方法:Centos7.2下yum直接安装的nginx,添加新模块支持tcp转发;重新编译Nginx并添加--with-stream参数。实现过程:1. 查看nginx版本模块[root@pre~]#nginx-V......
  • 如何给条码添加文字内容
    在使用条码打印软件制作条码时,有的时候需要在条码数据源中添加文字内容,并且扫描条形码后不显示添加的文字内容(如下图),这种需要怎么做呢?今天就以Code128条码为例,给大家演示一下如何给条码添加文字内容,且扫描后只显示数据。首先,打开条码打印软件,新建一个标签文件,根据标签纸的实际尺......
  • macOS下生成pdf报错:No wkhtmltopdf executable found
    重点:不要在PyCharm里直接安装 wkhtmltopdf!!!从wkhtmltopdf官网下载macOS下的pdg安装包,下载页面:wkhtmltopdf下载完后安装,通过which找到安装路径importpdfkitconfig=pdfkit.configuration(wkhtmltopdf='/usr/local/bin/wkhtmltopdf')pdfkit.from_string("abc","0.pdf&quo......
  • HTML
    HTML1.初识HTMLHTMLHyperTextMarkupLanguage超文本标记语言超文本:文字、图片、音频、视频、动画等HTML5+CSS3W3C标准WorldWideWebConsortium(万维网联盟)国际中立性技术标准机构W3C标准包括:结构化标准语言(HTML、XML)表现标准语言(CSS)行为标准(DOM、ECMASc......
  • 第1章 jQuery入门
    学习要点:1.什么是jQuery2.学习jQuery的条件3.jQuery的版本4.jQuery的功能和优势5.其他JavaScript库6.是否兼容低版本IE7.下载及运行jQuery一.什么是jQueryjQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是JohnResig,于2006年创建的一个开......
  • Django4全栈进阶之路19 项目实战(用户管理):user_delete.html用户删除画面设计
    1、模块:<tbody>{%foruserinuser_list%}<tr><td>{{user.username}}</td><td>{{user.email}}</td>......
  • html模板
    <html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>```......
  • 若依vue框架添加kotlin依赖,实现kotlin和java混合编译
    第一步:在最外部pom.xml文件添加版本号和依赖管理properties添加版本号<kotlin.version>1.4.21</kotlin.version><!--启用kotlin增量编译--><kotlin.compiler.incremental>true</kotlin.compiler.incremental>dependencyManagement添加依赖管理<!-......
  • 百度首页静态展示页面HTML+CSS
    一直觉得百度首页很复杂的,有那么多的东西,跟这个博主学习了之后,仿写了一下,样式好像很简单只设置的一些组件的高度而已,不得不说,CSS真是个好东西呀话不多说,直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>百度首页</titl......