Question

我需要使用javascript从div-tag中找到/获取一个名为“group”的类。之后，我想在我刚找到的div中插入一个html按钮（input = submit）。

如何使用javascript完成此操作？

到目前为止我已经尝试过了，但是得到并且错误：文件未被声明！

var myMessage = 'Mange tak';
var html_kode = '<input type="submit" onclick="clickedelm = this.value" id="qr_tak" tabindex="1" name="sbutton" title="(Alt + A)" accesskey="a" value="Auto Tak" class="button">';

if(myMessage) {
        var find_class = document.getElementsByClassName('group');
        if (find_class) {
            find_class.innerHTML += html_kode;
        }
    }

Answer 1

getElementsByClassName返回一个元素数组所以你需要迭代find_class变量

var find_class = document.getElementsByClassName('group');
for (var i = 0, len = find_class.length; i < len; i++) {
   find_class[i].innerHTML = find_class[i].innerHTML + html_kode;
}

Answer 2

“getElementsByClassName”返回set of elements，而不是单个元素。在你的if语句中，你真的想做这样的事情：

var len = find_class.length;
for (var ii = 0; ii < len; ii++) {
    find_class[ii].innerHTML = "new code";
}

Answer 3

查看jQuery。

var myMessage = 'Mange tak';
var html_kode = '<input type="submit" onclick="clickedelm = this.value" id="qr_tak" tabindex="1" name="sbutton" title="(Alt + A)" accesskey="a" value="Auto Tak" class="button">';

$(".find_class").html(html_kode);

Answer 4

除了按类名搜索外，通常最好为您的元素分配一个ID，然后您可以通过其ID唯一地识别它：

<div id="mydiv">
...
</div>

然后你就可以了

var mydiv = document.getElementById('mydiv');
mydiv.innerHTML = mydif.innerHTML + html_kode;

Answer 5

使用javascript库（即jQuery）可能是个好主意。

按类获取元素会更容易。标准的javascript无法按类获取内容（仅限id）。

如果你决定使用jQuery：

if(myMessage)
{
  var find_class = $('.group');
  if(find_class.length > 0)
  {
    find_class.each(function(){
     $(this).html(html_kode);
    });
  }
}

现在，如果您不想使用jQuery（Prototype，Dojo等），您可能想要搜索和ID而不是类 - 只需更改组转到ID，然后使用 getElementById

希望这有帮助

Answer 6

getElementsByClassName是DOM的一个相对较新的版本，一些旧的浏览器可能不支持它。 IE8，我在看着你。

目前大多数浏览器都应该没问题，但是有足够多的人使用旧版本的IE，你实际上无法使用getElementsByClassName而没有实现某种后备。

最常见的后备解决方案是使用JQuery，但是有other solutions你可以尝试简单地实现这个函数而不需要其他JQuery库的开销。

Answer 7

因为你说你在GreaseMonkey脚本中使用它：

您是否尝试过使用XPath？

这是我的剧本中的一个例子：

var XPath = function (path) {
    return document.evaluate(path, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
};

var yourOuterElement = XPath('/html/body/div[3]/form/table/tbody/tr/td/table');

var yourNewElement = document.createElement('input');

yourNewElement.setAttribute('type', 'submit');
yourNewElement.setAttribute('value', 'Send!');

yourOuterElement.appendChild(yourNewElement);

您可以通过FireBug获取yourOuterElement的XPath。

用javascript获取div类？

7 个答案: