Question

这似乎不起作用：

    <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>

其他带有jquery libs链接的html不在此代码中

Answer 1

如果你想使用jqueryui手风琴，你的html代码是错误的，根据jqueryUi doc，你必须试试这个：

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();    
 }

请参阅this example

Answer 2

如果你要做的是在新内容上做某种动画，你可以这样做：

<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>

Answer 3

转换它：

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).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);
            });
});

或者你想做什么动画。 .promise()基本上为对象创建了一个服务员，直到所有操作都完成并且.done(function(){})附加了成功的回调。非常漂亮，你现在可以为任何元素做到这一点。

.promise() info here，.done() info here

作为旁注，你真的应该考虑你正在做的追加。这可以在HTML中，设置为display:none，然后根据特定内容加载SHOWN吗？需要考虑的事情。

编辑：新方法，tested here with basic animation。的工作原理。

Answer 4

如果我正确读到这个，那就是一个带有手风琴ID的div，其中包含两个div。这两个div中的每一个都有一个标题标记和一个段落标记。两个标题标记和两个段落标记都包含副本。

我无法想到一种超级简洁的方法来实现这一点，因为很多元素都是在动态创建的。我确实认为使用createElement（）创建所有关于DOM的东西，用appendChild（）安排它然后通过文档片段加载它是一个很好的方法，因为从性能的角度来看它明显更好。 Paul Irish详细介绍了所有这些here。

  $(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);
  });

由于有些东西被创建了两次，因此可以使用一个函数来创建东西，但这可能会产生性能问题。

只是我的$ .02 ......

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

4 个答案: