Javascript 如何将jquery效果应用于使用getElementById插入的生成HTML？

这似乎不起作用：

    <script>
    window.onload = function()   
    {    
        var div = '<div id="accordion">';
        div += '<div>';
          div += '<h3>section1</h3>';
          div += '<p>text 1</p>';
          div += '</div>';
        div += '<div>';
          div += '<h3>section2</h3>';
          div += '<p>text 2</p>';
        div += '</div>';
        div += '</div>';

        document.getElementById("list").innerHTML = div;
    }
    </script>

window.onload=函数（）
{    
var div=''；
div+=''；
div+=“第1节”；
div+='文本1
'；
div+=''；
div+=''；
div+=“第2节”；
div+='文本2
'；
div+=''；
div+=''；
document.getElementById（“列表”）.innerHTML=div；
}

---

带有jquery libs链接的html的其余部分在此代码中被省略了

如果您试图在新内容上做某种动画，您可以这样做：

<script>
window.onload = function()   
{    
    var div = '<div id="accordion" style="display: none;">';
    div += '<div>';
      div += '<h3>section1</h3>';
      div += '<p>text 1</p>';
      div += '</div>';
    div += '<div>';
      div += '<h3>section2</h3>';
      div += '<p>text 2</p>';
    div += '</div>';
    div += '</div>';

    document.getElementById("list").innerHTML = div;
    $("#accordion").fadeIn(2000);
}
</script>

window.onload=函数（）
{    
var div=''；
div+=''；
div+=“第1节”；
div+='文本1
'；
div+=''；
div+=''；
div+=“第2节”；
div+='文本2
'；
div+=''；
div+=''；
document.getElementById（“列表”）.innerHTML=div；
$（“手风琴”）。fadeIn（2000年）；
}

将其转换为：

window.onload = function()   
{    
    var div = '<div id="accordion">';
    div += '<div>';
      div += '<h3>section1</h3>';
      div += '<p>text 1</p>';
      div += '</div>';
    div += '<div>';
      div += '<h3>section2</h3>';
      div += '<p>text 2</p>';
    div += '</div>';
    div += '</div>';

    document.getElementById("list").innerHTML = div;
}

window.onload=function（）
{    
var div=''；
div+=''；
div+=“第1节”；
div+='文本1
'；
div+=''；
div+=''；
div+=“第2节”；
div+='文本2
'；
div+=''；
div+=''；
document.getElementById（“列表”）.innerHTML=div；
}

为此：

$(window).on('load',function(){
    var div = '<div id="accordion">';
        div += '<div>';
        div += '<h3>section1</h3>';
        div += '<p>text 1</p>';
        div += '</div>';
        div += '<div>';
        div += '<h3>section2</h3>';
        div += '<p>text 2</p>';
        div += '</div>';
        div += '</div>';

    $('#list')
            .html(div)
            .promise()
            .done(function(){    
                $('#accordion').animate({opacity:0.2},1000);
            });
});

$（窗口）.on（'load'，function（））{
var div=''；
div+=''；
div+=“第1节”；
div+='文本1
'；
div+=''；
div+=''；
div+=“第2节”；
div+='文本2
'；
div+=''；
div+=''；
$（“#列表”）
.html（div）
.承诺
.done（函数（）{
$（#accordion'）。动画（{opacity:0.2}，1000）；
});
});

或者你想做的任何动画。

.promise（）

基本上是为对象创建一个服务程序，直到所有操作都完成并且

.done（function（）{}）

将一个成功的回调附加到该对象。非常漂亮，你现在可以为任何元素做这个

,

作为旁注，你真的应该考虑一下你正在做的追加。这是否可以在HTML中设置为

display:none

，然后根据特定内容加载显示？有点值得考虑。

---

编辑：新方法。有效。

如果您想使用jqueryui accordion，您的html代码是错误的，根据文档，您必须尝试以下操作：

function initAccordion (){
    $(function() { 
        $( "#accordion" ).accordion({ heightStyle: "content" }); 
    });
}

window.onload = function()   
{    
    var div = '<div id="accordion">';
    div += '<h3>section1</h3><div>';
    div += '<p>text 1</p>';
    div += '</div>';
    div += '<h3>section2</h3><div>';
    div += '<p>text 2</p>';
    div += '</div>';
    div += '</div>';

    document.getElementById("list").innerHTML = div;
    //init jquery accordion
    initAccordion();    
 }

函数初始化手风琴（）{
$（函数（）{
$（“#手风琴”）。手风琴（{heightStyle:“content}）；
});
}
window.onload=函数（）
{    
var div=''；
div+=“第1节”；
div+='文本1
'；
div+=''；
div+=“第2节”；
div+='文本2
'；
div+=''；
div+=''；
document.getElementById（“列表”）.innerHTML=div；
//initjquery手风琴
手风琴（）；
}

---

请参见

如果我没有看错的话，这里有一个ID为手风琴的div，其中包含两个div。这两个div中的每一个都有标题标记和段落标记。标题标记和段落标记都包含副本

我想不出一个超级简洁的方法来实现这一点，因为很多元素都是动态创建的。我确实认为，使用createElement（）创建DOM中的所有内容，使用appendChild（）对其进行排列，然后通过文档片段加载所有内容是一种很好的方法，因为从性能的角度来看，这会显著提高性能。保罗·爱尔兰对这一切进行了详细的阐述

因为有些东西会被创建两次，所以函数可以用来创建东西，但这可能会造成性能问题

---

就我的$.02…

首先，你为什么不把它转换成jQuery而不是将两者混合使用呢？添加HTML后，你可以通过调用

$（“#accordion”）

用jQuery访问它。你想应用什么效果？那代码对我来说很有用：是的，我知道，但我需要在课程示例中使用它。这会给出与我相同的结果；div中填充了数据，但对id为list的div（即正在填充的div）没有一致性影响；它是否与jquery库在html中的位置有关？我将所有脚本和链接放在你的代码上方的标题中，修改了我的答案，使用jQuery 1.9提供的新的

.promise（）.done（function（）{}）

功能尝试一些不同的东西。它适用于普通动画，如我提供的JSFIDLE链接所示。如果第一次加载时没有看到动画，请再次运行。您将看到动画已正确应用于以前无法访问的

#accordion

元素。是的，很好，这很好，谢谢@阿乔：这能解决你的问题吗？

  $(function(){
    // on the page already...just targeting it with a variable
    var onPageEl = document.getElementById('list');

    // created off-DOM...we'll load our stuff here before loading it onto the page
    var frag = document.createDocumentFragment();

    // create elements
    var accordion = document.createElement('div');
    var div1 = document.createElement('div');
    var header1 = document.createElement('h3');
    var somePara1 = document.createElement('p');
    var div2 = document.createElement('div');
    var header2 = document.createElement('h3');
    var somePara2 = document.createElement('p');

    // use jQuery to give our containing element an ID of 'accordion'
    $(accordion).attr('id', 'accordion');

    // arrange the first bulk of div code
    accordion.appendChild(div1);
    div1.appendChild(header1);
    div1.appendChild(somePara1);
    header1.innerHTML = "section1";
    somePara1.innerHTML = "text1";

    // arrange the second bulk of div code
    accordion.appendChild(div2);
    div2.appendChild(header2);
    div2.appendChild(somePara2);
    header2.innerHTML = "section2";
    somePara2.innerHTML = "text2";

    // Load both bulks of content into the document fragment
    frag.appendChild(div1);
    frag.appendChild(div2);

    // Load the document fragment onto 'list' which is already on the page
    onPageEl.appendChild(frag);
  });