• 技术文章 >web前端 >js教程

    jquery怎么输出html代码

    coldplay.xixicoldplay.xixi2020-11-17 15:07:29原创61

    jquery输出html代码的方法:1、直接输出标签元素,代码为【var form1 = "<form id=\"myform\" method=\"post\" >"】;2、输出带变量的标签元素,代码为【var country =....】。

    jquery输出html代码的方法:

    形式一:直接输出标签元素

    1.采用转义符号

    var form1 = "<form id=\"myform\" method=\"post\" >"
    +"<input type=\"text\" name=\"uname\"  style=\"height:20px;width:100%;\" />"
    +"<input type=\"password\" name=\"pwd\" style=\"height:20px;width:100%;\" />"
    +"</form>";

    2.采用单引号

    var form2  = '<form id="myform" method="post" >'
    +'<input type="text" name="uname"  style="height:20px;width:100%;" />'
    +'<input type="password" name="pwd" style="height:20px;width:100%;" />'
    +'</form>';

    3.采用es6的模板字符量(不过我喜欢用模板字符串来称呼这个。。。)

    就是在前后都加上了一个( ` ),它中间就写你要输出的东西,写标签就输出标签,写\n就表示换行,写变量的话是不会输出变量代表的值,而是把变量的名字给输出来。比如说变量country的值为“中国”,那么它不会输出中国这个值,而是country变量名,要输出值的话请看 形式二。

     var form3 = `<form id="myform" method="post">
        <input type="text" name="uname" style="height:20px;width:100%;" />
        <input type="password" name="pwd" style="height:20px;width:100%;" />
      </form>`

    形式二:输出带变量的标签元素

    1.采用转义符号

    var country = "中国";
    var table = "<table border=\"1\" style=\"width:100%;\">";
    table += "<caption>国家信息列表</caption>";
    table += "<thead><tr><th>ID</th><th>Name</th></tr></thead>";
    table += "<tbody><tr><td>1</td><td>"+country+"</td></tr></tbody>";
    table += "</table>";

    2.采用单引号

    var country = "中国";
    var table = '<table border="1" style="width:100%;">';
    table += '<caption>国家信息列表</caption>';
    table += '<thead><tr><th>ID</th><th>Name</th></tr></thead>';
    table += '<tbody><tr><td>1</td><td>"'+country+'"</td></tr></tbody>';
    table += '</table>';

    3.采用es6的模板字符量(不过我喜欢用模板字符串来称呼这个。。。)

    输出变量的值,比如上面说到的country=“中国”,那么要怎么才可以输出中国这个值呢?

    其实可以用占位符来代表${ },括号中间的部分就写上你要输出变量所代表的变量名称。

    var country = "中国";
    var table = `<table border="1" style="width:100%;">`;
    table += `<caption>国家信息列表</caption>`;
    table += `<thead><tr><th>ID</th><th>Nane</th></tr></thead>`;
    table += `<tbody><tr><td>1</td><td>${country}</td></tr></tbody>`;
    table += `</table>`;

    相关免费学习推荐:JavaScript(视频)

    以上就是jquery怎么输出html代码的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:jquery 输出html
    上一篇:react中元素和组件的区别是什么 下一篇:jquery如何设置文字不间断滚动
    第14期线上培训班

    相关文章推荐

    • php echo输出html问题 在线结贴• PHP数组混写输出HTML代码• JSP输出HTML时产生的大量空格和换行的去除方法• php怎么输出html源代码

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网