Question

我有一组动态创建的具有相同类名的div。现在我想为所有上面提到的div添加一个全新的div。

假设类名是extra-upper-block

在我的页面末尾，我有这段代码

<script>
    //function call to load dynamic content
</script>
<script>
    $('.extra-upper-block').append('<div>New Div</div>');
</script>

这会在chrome控制台

中引发错误

Uncaught TypeError: undefined is not a function

但是当页面加载后在chrome的控制台中执行此代码时，它可以正常工作！即使我在执行append命令之前加载动态内容，为什么它也不起作用。帮助

Answer 1

document.getElementsByClassName返回一个类似数组的对象，你不能像jQuery那样使用它，你需要在循环中访问单个元素。另外，在DOM元素上使用appendChild，因为它们没有append方法（就像jQuery那样）。

另外，你试图追加一个字符串<div>New div</div>，你不能用DOM元素直接做到这一点，所以你可以像这样创建div元素：

<强> Demo

var elements = document.getElementsByClassName('extra-upper-block');

for(var i=0; i<elements.length; i++){
    var newDiv = document.createElement('div');
    newDiv.appendChild(document.createTextNode('New div'));
    elements[i].appendChild(newDiv);
}

注意：querySelectorAll具有比此更好的跨浏览器支持。如果你有jQuery，你可以简单地做：

$('extra-upper-block').append('<div>New Div</div>');

如您所见，使用jQuery，您可以直接追加字符串。

Answer 2

使用jQuery类选择器。

$(document).ready(function(){
    $('.extra-upper-block').append('<div>New Div</div>');
});

将代码包装在$(document).ready()中以获取jQuery以获取元素，并包含jQuery文件引用。

注意：.append()方法是jQuery的一部分。

Demo

Answer 3

尝试写作

document.getElementsByClassName('extra-upper-block')[0].appendChild(document.createElement('div'));

Answer 4

Append是jQuery中的一个函数，试试这个：

<script>
$(function() {
      $('.extra-upper-block').append('<div>New Div</div>');
});  
</script>

附加到动态内容

4 个答案:

Demo