jQuery如何向HTML添加指定的内容

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery如何向HTML添加指定的内容相关的知识，希望对你有一定的参考价值。

参考技术A 可以定义一个全局变量，在选取该元素将此元素赋给此变量，在点button时，将此变量append到你所要添加的地方。
比如：
var
tempDOM
;
function
clickDOM()
tempDOM
=
$(this);

function
clickButton()
$("#你所要添加到的div或者其他的id").append(tempDOM);
参考技术B $(document).ready(function()
$("#btn2").click(function()
$("<input
type='text'
name='ddd'
id='ddd'
value='Hello,
Nowamagic'
><br>").appendTo("#ccc");
);
$("#btn1").click(function()
$("#nowamagic").append("<input
type='text'
name='ddd'
id='ddd'
value='Hello,
Nowamagic'
><br>");
);
);
这里我们必须知道一点，就是
append
和
appendTo
的区别：append
单纯的内容，appendTo
要把内容传给某个元素。
这个函数的用法有很多，比如你可以按需要追加form，在区域内追加图片等等都是可以的。

html HTML / JQUERY：将窗口宽度特定类设置为body标签。用于向旧版浏览器添加媒体查询支持或添加宽度指定

<html>
    <head>
        
        <style>
            // hide body from view
            body {opacity: 0}
        </style>
        
    </head>
    <body
        class=""
        data-small="480"
        data-medium="600"
        data-large="960"
    >
        <h1>Hello World</h1>
        
        
        <div class="debug"></div>
        
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            
            (function($,sr){
            
              // debouncing function from John Hann
              // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
              var debounce = function (func, threshold, execAsap) {
                  var timeout;
            
                  return function debounced () {
                      var obj = this, args = arguments;
                      function delayed () {
                          if (!execAsap)
                              func.apply(obj, args);
                          timeout = null;
                      };
            
                      if (timeout)
                          clearTimeout(timeout);
                      else if (execAsap)
                          func.apply(obj, args);
            
                      timeout = setTimeout(delayed, threshold || 100);
                  };
              }
              // smartresize 
              jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
            
            })(jQuery,'smartresize');
                     
            function debug(target,msg) {
                //code
                if (target == 'console') {
                    // write to browser console
                    console.log(msg);
                    return;
                }
                else if (target == 'body') {
                    // copy msg to debug
                    $('div.debug').html(msg);
                    return;
                }
                else if (target == 'alert') {
                    // show msg in popup
                    alert(msg);
                    return;
                }
                else {
                    return;
                }
            }
            
            function iniPage() {
                //execute on load and AFTER a resize.
                $('body').css({opacity: 0});

                var window_width = $(window).width();
                
                var small   = $('body').attr('data-small');
                var medium  = $('body').attr('data-medium');
                var large   = $('body').attr('data-large');
                
                if (window_width <= small) {
                    //small device
                    var body_class = 'small';
                }
                else if (window_width > small && window_width <= large) {
                    //medium device
                    var body_class = 'medium';
                }
                else if (window_width > large) {
                    //large device
                    var body_class = 'large';
                }
                
                $('body').removeClass('small medium large').addClass(body_class);
                
                // Show body
                $('body').animate({opacity: 1}, 3000);                

                var msg = 'function iniPage() executed. Body class is ' + body_class ;
                debug('console',msg);
            }
            
            
            $(document).ready(function() {
                // Execute when the DOM is fully loaded.
                iniPage();
            });
            
            $(window).smartresize(function(){
                // Execute after a window resize.
                iniPage();
            });
            
        </script>
        
    </body>
</html>

以上是关于jQuery如何向HTML添加指定的内容的主要内容，如果未能解决你的问题，请参考以下文章

html HTML / JQUERY：将窗口宽度特定类设置为body标签。用于向旧版浏览器添加媒体查询支持或添加宽度指定