javascript - Html 注入(inject) javascript 代码

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 代码中创建的按钮插入到我的脚本中吗？

注意:我知道这可能是一个简单而琐碎的问题，很抱歉到目前为止我无法通过谷歌搜索找到清晰正确的答案我对 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 字段不会更改文本!而且我还需要创建输入，而不是值(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/