Question

首先，我应该说这是我学习java脚本的第一天。

基本上我正在尝试创建chrome扩展，它会在“google.com”中的搜索栏按钮后添加虚拟按钮。

到目前为止，我已经编写了这段代码：

var x = document.getElementsByName("btnK");
if (typeof x[0] === 'undefined' || x[0] === null) {

} else {
    parent = x[0].parentElement;
    button = document.createElement("button");
    parent.appendChild(button);
}

正如您所看到的，我正在获取谷歌的搜索按钮，然后获取它的父级并添加按钮作为最后一个。这里的问题是，在我创建此按钮后，它无法以任何方式进行修改。

据我所知，我无法更改新创建元素的样式或文本，只有在加载表单时已经定义的元素。所以，知道这个我想问的信息（我的问题在下面）

问题： 有没有办法将html代码中创建的按钮插入我的脚本？

注意： 我明白这可能是一件容易而且微不足道的问题，而且我很抱歉，到目前为止，我无法通过Google搜索找到明确正确的答案我有点迷惑javascript

编辑： 评论后我需要澄清一件事。 我不能在createElement之后使用任何代码到按钮，它没有任何效果，所以基本上我需要用已经定义的风格创建它

编辑： 感谢所有评论中的建议，这是我到目前为止所尝试的内容：

第一种方法：

正如所建议的那样，我只是直接复制按钮“搜索”，稍微改变一下并读回父母。我希望现在看到三个按钮，但它只是在新位置重新绘制搜索按钮，这是代码：

x[0].value = "test"
parent.appendChild(x[0]);

第二种方法：

创建按钮，然后获取并更改，也无法正常工作，这是代码：

button.id = "dummyId"
parent.appendChild(button);
var styledButton = document.getElementById("dummyId");
styledButton.value = "test";

如果我在“检查元素”中查看此按钮，它会更改值，但在视觉上它是空的

伙计们，对不起，这是我的愚蠢。只是value字段不会改变文本！而且我还需要创建输入，而不是值

所以，最后的灵魂：

    input = document.createElement("input");
    input.type = "submit"
    input.value = "test"
    parent.appendChild(input);

再次抱歉

Answer 1

创建按钮时，您可以添加，添加文本，类，事件侦听器等。

button = document.createElement("button");
button.id = 'my-new-button';
button.textContent = 'Click me';
button.classList.add('my-button');
button.addEventListener('click', function() {
    alert('clickie');
});

演示：https://jsfiddle.net/ubmb6p3f/1/

Html注入javascript代码

1 个答案: