Question

我需要在呈现为html的变量中使用以下代码，而不是字符串：

<div style="display:table-cell; vertical-align:middle">
    <center>
        <h1>TO THE TIME</h1>
        <script type="application/javascript">
           var myCountdown1 = new Countdown({
                                //year      : 2015,
                                month   : 11,    
                                day     : 11,     
                                hour    : 00,    
                                ampm    : "am",  
                                minute  : 00,         
                                second  : 00,       
                                width:290, 
                                height:60,  
                                rangeHi:"month",
                                rangeLo:"seconds",
                                style:"flip"
                            });

        </script>
    </center>
</div>

我尝试将其存储为

htmlcontent[idgrab] = '<div style="display:table-cell; vertical-align:middle">'+
'<center>'+
'<h1>TO THE TIME</h1>'+
'<script type="application/javascript">'+
'var myCountdown1 = new Countdown({'+
                                'month  : 11,'+    
                                'day    : 11,'+     
                                'hour   : 00,'+    
                                'ampm   : "am",'+    
                                'minute : 00,'+         
                                'second : 00,'+       
                                'width:290,'+ 
                                'height:60,'+  
                                'rangeHi:"month",'+
                                'rangeLo:"seconds",'+
                                'style:"flip"'+
                                '});'+

'</script>'+
'</center>'+
'</div>';

但这没有用，基本上我有代码可以动态创建html，我设法使用. html抓取但是这个我只是设法显示为使用{{1的字符串}};或完全打破网站。

编辑：

普通渲染器使用以下代码拉取代码：

""

适用于不包含javascript的基本html，但特别是对于这个div，它似乎需要手动插入到我遇到麻烦的数组中，因为div需要存储而不执行javascript代码（它需要在调用数组后执行。）

Answer 1

尝试使用$.parseHTML

＆＃13;

var htmlcontent = {};

htmlcontent["idgrab"] = '<div style=display:table-cell; vertical-align:middle>'
+ '<center>'
+ '<h1>TO THE TIME</h1>'
+ '<script type="application/javascript">'
+ 'var myCountdown1 = new Countdown({'
+ 'month'+  ':'+ '11,'
+ 'day'+ ':'+ '11,'
+ 'hour'+   ':'+ '00,'
+ 'ampm' +  ':' + '"am",'
+ 'minute' +':'+ '00,'
+ 'second' + ':' + '00,'
+ 'width' +':' + '290,'
+ 'height' +':' + '60,'
+ 'rangeHi' + ':'+ '"month",'
+ 'rangeLo' +':' + '"seconds",'
+ 'style' +':' + '"flip"'
+ '});'
+ '</scr'+'ipt>'
+ '</center>'
+ '</div>';

var html = $.parseHTML(htmlcontent["idgrab"], document, true);
console.log(htmlcontent["idgrab"], html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

如果你想在没有jquery的情况下将html字符串解析为DOM元素（树），你可以this

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

如果您的网站中有jquery，则只需使用$.parseHTML(htmlString);

工作jsfiddle

Answer 3

通常，您希望将JavaScript完全保留在HTML之外，并且只需绑定到相关的DOM事件，例如$(document).ready(function(){})或$(window).load(function(){})。大多数UI框架允许您挂钩到多个事件，包括首次将元素呈现给DOM时。

如果您需要输出HTML以便在动态窗口小部件中使用，您可以尝试在DOM中呈现它们之前转义它们，例如：适用于PHP的htmlspecialchars或适用于Node.js的escape-html escape方法如果您选择了这条路线，那么最好的做法可能就是将data-* attribute放到jQuery Cycle 2那样。

Javascript将html / jquery存储在变量

3 个答案: