如何将字符串中的javascript块添加到html中？ [英] How to append javascript block in a string into html?

问题描述

 < div class =content> 
< script language =JavaScript> 
函数validate（）{
 alert（'validate is working'）; 
} 
< / script> 
< div class =container> 
< a href =＃onclick =javascript：validate（）;>我的按钮< / a> 
< / div> 
< / div> 
  

现在，我想将响应转换为html并将其附加到页面，这使得ajax调用。

  $。get（'test.php'，function（data）{
 $（'＃someTarget '）.append（$（data）.find（'。content'）。html（））; 
}）; 
  

我已经尝试了上面的代码，但它似乎只能追加容器div。有没有办法将javascript代码块添加到我的现有页面中？

$ b $

  $（'＃someTarget'）。append（$（data）.find（'content'）。html（））; 
  

1. $（data）解析和执行脚本，然后将其插入到DOM中




2. 假设您的意思是<$ c （）。（data）.find（'。content'）。html（） html（）返回innerHTML的内容，您只需要 $（data）。

试试这个：

 < div class =content> 
< style type =text / javascript> 
函数validate（）{
 alert（'validate is working'）; 
} 
< / style> 
< div class =container> 
< a href =＃onclick =javascript：validate（）;>我的按钮< / a> 
< / div> 
< / div> 
  

现在有一个技巧：我使用< style> 来包装脚本，这些脚本应该在解释并插入到DOM后执行。

  $。get（' test.php'，函数（data）{
 
 //将HTML解析为DOM 
 var $ data = $（data）; 
 
 //将脚本out 
 var $ inlineScripts = $（'style [type =text / javascript]'，$ data）.remove（）; 
 
 //现在追加DOM 
 $（'＃someTarget'）。append（$ data）; 
 
 //和globalEval脚本
 $ inlineScripts.each（function（）{
 $ .globalEval（this .innerText）; 
}）; 
}）; 
  

好吧，您的简单验证函数被点击处理程序调用，您目前不需要我内联脚本的技巧，但是当你有活动的脚本时，你需要它，这应该在插入HTML被解析和之后执行。

Update：如果你不想插入'.content'，不要使用html（） - 因为它返回一个字符串，所以你可以两次解析html。使用 .append（$（。container，$（data）））或 .append（$（data）.find（。容器））。

I have an ajax call which returns me following response:

<div class="content">
    <script language="JavaScript">  
        function validate(){
            alert('validate is working');
        }
    </script>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

Now, i want to convert the response into html and append it to the page, which made the ajax call.

$.get('test.php', function(data) {
    $('#someTarget').append($(data).find('.content').html());
});

I have tried above code, but it seems this only append container div. Is there a way to append javascript code block into my existing page?

解决方案

In your code are two problems:

$('#someTarget').append($(data).find('content').html());

1. $(data) does parse and execute your script, before you inserted it into DOM

2. assuming you meant $(data).find('.content').html() the html() returns the innerHTML of content, you only need $(data).

Try this:

<div class="content">
    <style type="text/javascript">  
        function validate(){
            alert('validate is working');
        }
    </style>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

Now there is a trick: I'm using <style> to wrap scripts, that should be executed after interpreting and inserting into DOM.

$.get('test.php', function(data) {

    // parse HTML to DOM
    var $data = $(data);

    // take the scripts out
    var $inlineScripts = $('style[type="text/javascript"]', $data).remove();

    // Now append the DOM
    $('#someTarget').append($data);

    // And globalEval the scripts
    $inlineScripts.each(function () {
        $.globalEval(this.innerText);
    });
});

Okay for your simple validate function that gets called by a click handler, you currently don't need my trick for inline scripts, however you will need it, when you have active scripts, that should be executed after the HTML is parsed and inserted.

Update: If you don't want the '.content' to be inserted, don't use html() - because it returns a string, so you do parse the html twice. Use instead .append( $(".container", $(data)) ) or .append( $(data).find(".container") ).

这篇关于如何将字符串中的javascript块添加到html中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！