在JavaScript函数中确定调用div

Question

我有一个jquery函数，它返回用于随机广告的html。

function getAd() {
    document.write( '<div>Some randomized ad html</div>' );
}

要插入广告，请在html文件中添加以下广告：

<div><script>getAd();</script></div>

这可行，但是，我试图用更安全的东西（例如append（））替换document.write（）代码。 所以我正在尝试：

function getAd() {
    $(this).append( '<div>Some randomized ad html</div>' );
}

但是，$（this）是窗口而不是div。

我也试过这个：

function getAd(elem) {
    $(elem).append( '<div>Some randomized ad html</div>' );
}

在html中，我通过了：

<div><script>getAd(this);</script>

但是再一次，$（elem）是一个窗口而不是div。 （在这两种情况下，我都会收到“无法读取未定义的属性'createDocumentFragment'”的错误。）

我知道我可以为div分配一个ID，然后将该ID传递给getAd（）函数，但是我在网站上有数百个此类调用（有时在同一页面上有多个调用），所以我宁愿不必分配然后每次调用此函数时传递一个id。

调用函数是否可以确定调用元素，以便可以附加html？

谢谢！

Answer 1

您可以向所有元素添加通用属性（ 或类 ）：

<div random-ad>

然后，使用$.each()调用函数：

function getAd(elem) {
    $(elem).append( '<div>Some randomized ad html</div>' );
}

$(document).ready(function(){
    $('[random-ad]').each(function(){
        getAd(this);
    });
});