Question

我需要在ul li中创建动态嵌套div。这是我需要动态创建的。

<ul>
                                <li>
                                    <div class="videoThumbnail">
                                        <img src="./img6.jpg" />
                                        <div class="videoDesc">Lorem ipsum dolor sit amet</div>
                                        <div class="videoDate">02/07/2012</div>
                                    </div>
                                </li>..

请帮忙。

Answer 1

首先，给你一个id，我选择rootEl

<ui id="rootEl">
</ui>

其次，这个JavaScript：

var rootEl = document.getElementById('rootEl');

function appendStuff() {
    var listItem = document.createElement('li');
    var videoThumbnail = document.createElement('div');
    var myImage = document.createElement('img');
    var videoDesc = document.createElement('div');
    var videoDate = document.createElement('div');
    videoThumbnail.setAttribute('class','videoThumbnail');
    myImage.src = "./img6.jpg";
    videoDesc.setAttribute('class','videoDesc');
    videoDate.setAttribute('class','videoDate');
    videoDesc.innerHTML = "Lorem ipsum dolor sit amet";
    videoDate.innerHTML = "02/07/2012";

    videoThumbnail.appendChild(myImage);
    videoThumbnail.appendChild(videoDesc);
    videoThumbnail.appendChild(videoDate);
    listItem.appendChild(videoThumbnail);

    rootEl.appendChild(listItem);
}

最后，一个按钮来创建那些东西并附加它

<button onclick="appendStuff()">click me</button>

现在，每次点击该按钮，你都会附加那些东西，如果你不想多次使用它，你可以修改我的功能来显示其他数据，或只是让按钮不可见或禁用它我请你在问这里之前问谷歌。

如何使用jquery在ul li标签内创建动态嵌套div

1 个答案: