javascript/jQuery"insertAfter"函数参数中的空格导致失败

Question

我正在使用jQuery在按钮后插入一些html,单击该按钮时

以下功能运作良好:

$(document).ready(function(){       
    $('#someid').click(function() {     
        $('<div>Hello world</div>').insertAfter($('#someid').parent());                
     });
});

我发现了两件我不理解的事情:

1.

   $(document).ready(function(){        
        $('#someid').click(function() {     
            $('<div>Hello world</div>
               <div>another div</div>    <p>some html</p>


               <div>weird spacing</div>
              ').insertAfter($('#someid').parent());                
         });
    });

不起作用,即在元素之间引入空格(或换行符？)会导致函数失败.

2.

$(document).ready(function(){       
    $('#someid').click(function() {     
        $('Im just a string not good HTML').insertAfter($('#someid').parent());                
     });
});

也失败了,似乎我没有插入有效的HTML作为函数的参数,它不插入它？

2)只是一个好奇心,但1)阻止我粘贴大量的HTML,如果点击按钮我想要插入HTML,我是否必须删除所有的空白？

Answer 1

这是因为转义字符的转义用法.

换行符在javascript中被视为语句的结尾,您可以\在结尾处使用a 来在字符串文字中对其进行转义

   $(document).ready(function(){        
        $('#someid').click(function() {     
            $('<div>Hello world</div>\
               <div>another div</div>    <p>some html</p>\
               \
               \
               <div>weird spacing</div>\
              ').insertAfter($('#someid').parent());                
         });
    });

此外,由于您已经使用了'包含字符串,因此字符串中的任何实例也必须进行转义\

$(document).ready(function(){       
    $('#someid').click(function() {     
        $('I\'m just a string not good HTML').insertAfter($('#someid').parent());                
     });
});