前端之快速创建标签

一、问题

前端经常遇见需要动态生成标签,然后放在页面的某个位置,要创建每一个tag非常的麻烦。

二、利用的字符串格式化,加上多行字符串,追加在元素后面,就很迅速了

以下代码来源于网络

String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
    if (arguments.length == 1 && typeof (args) == "object") {
        for (var key in args) {
            if (args[key] != undefined) {
                var reg = new RegExp("({" + key + "})", "g");
                result = result.replace(reg, args[key]);
            }
        }
    }
    else {
        for (var i = 0; i < arguments.length; i++) {
            if (arguments[i] != undefined) {
                var reg = new RegExp("({[" + i + "]})", "g");
                result = result.replace(reg, arguments[i]);
            }
        }
    }
}
return result;
}
var chattag = " <div class=‘plain‘ style=‘height: 50px;margin-top: 10px;‘>                     <pre class=‘js_message_plain ng-binding pull-right‘                        style=‘background-color: #b2e281‘>{content}</pre></div>";
var chatdiv = chattag.format({content:content});
$(‘#chatcontent‘).append(chatdiv);

就可以迅速容易的创建标签了

时间: 2024-10-12 07:29:55

前端之快速创建标签的相关文章

使用PHP快速创建现代化的form表单,支持前端js扩展,就是方便

form-builder 使用PHP快速创建现代化的form表单,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能. 详细查看: Github地址 | Composer地址 表单使用form-create js表单生成器生成 如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢! 本项目还在不断开发完善中,如有建议或问题请在这里提出 安装 composer require xaboy/form-b

前端-jq创建标签/添加属性/css属性

jq创建标签 var ptag = $('<p>'); jq添加属性如href,id,class,name等 $('#content').attr('class/id/name/href', 'active') $('#id').html('标签的文本') $('#input).val('xxxxxxx') jq添加style属性即css,如width,height,text_aling $("div").css({"background-color":

快速创建网站》 2.3 WordPress初始化和功能简介

本文是<快速创建网站>系列的第4篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 1. 网站管理平台WordPress和云计算平台Azure简介 (6分钟 本文) 2.1 在Azure上创建网站及网站运行机制 (13分钟) 2.2 域名绑定操作和Azure负载均衡机制 (12分钟) 2.3 WordPress 初始化和网站管理功能 (11分钟) 3.1 WordPress 数据导入 (12分钟) 3.2 WordPress 多站点支持和Azure在线代码编辑

《快速创建网站》 2.3 WordPress初始化和功能简介

本文是<快速创建网站>系列的第4篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 1. 网站管理平台WordPress和云计算平台Azure简介2.1 在Azure上创建网站及网站运行机制2.2 域名绑定操作和Azure负载均衡机制2.3 WordPress 初始化和网站管理功能3.1 WordPress 数据导入3.2 WordPress 多站点支持和Azure在线代码编辑器3.3 WordPress 多语言支持 Multisite Language Sw

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文

(视频) 《快速创建网站》3.4 网站改版3分钟搞定 - WordPress主题安装和备份

本文是<快速创建网站>系列的第8篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文.访问本系列目录,请点击:http://anb.io/blog/tag/wordpress-on-azure/ 1. 网站管理平台WordPress和云计算平台Azure简介 (6分钟视频 ) 2.1 在Azure上创建网站及网站运行机制 (13分钟视频) 2.2 域名绑定操作和Azure负载均衡机制 (12分钟视频) 2.3 WordPress 初始化和网站管理功能 (11分钟视

Frame - 快速创建高品质的 Web 应用原型

Frame 是一个让你够能够快速创建高品质的网站或应用程序产品原型的工具.你上传的图片将被包裹在真实的设备环境中.它是一个用于创建宣传资料的专业工具.Frame 完全免费供给商业和个人使用.他们也正探索一种可能性,增加额外的功能给那些正在寻找特色功能的用户,但没有计划立即开始收费. 官方网站 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQ

django环境下快速创建一个网页

学习目标:10分钟快速创建一个查询用户列表的页面第一步,在settings.p里面的INSTALLED_APPS添加创建的app名字,这里用helloINSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfi

springBoot(2)---快速创建项目,初解jackson

快速创建项目,初解jackson 一.快速创建项目 springboot官网提供了工具类自动创建web应用:网址:http://start.spring.io/ 官网页面 1.快速创建一个 选择web代表这是一个web项目 这样就可以吧项目放到eclipse或者idea中进行运行了. 这里需要注意几点: 1.springboot2X,所需要mevan是3.0+,JDK是1.8+ 2.在做项目开发的时候,主入口Application类(带有注解@SpringBootApplication),要放在