如何在脚本中使用javascript创建按钮和文本输入。（猴子）

我正在使用TamperMonkey创建脚本（Javascript）。这个平台上使用最多的脚本会创建按钮和框，以便在网站上输入他们希望脚本出现的文本（例如，在google.com上创建一个额外的按钮，当单击它时会执行一个功能）。我有一些例子，比如youtube网站上的youtube到mp4转换器。（如果这有帮助的话）如果这需要HTML或CSS，而不是真正熟悉这些语言。 如何创建类似于此脚本的按钮和文本框以放入JavaScript代码中

---

此代码将创建一个按钮（）：

/==UserScript==
//@name\u添加活动按钮
//@description添加带有样式的live example按钮。
//@包括https://stackoverflow.com/questions/*
//@grant GM_addStyle
//==/UserScript==
/*---在容器div中创建一个按钮。它将被设置样式并
定位与CSS。
*/
var zNode=document.createElement（'div'）；
zNode.innerHTML=“”
+“看在皮特的份上，别点击我！”
;
zNode.setAttribute（'id'，'myContainer'）；
document.body.appendChild（zNode）；
//---激活新添加的按钮。
document.getElementById（“myButton”）.addEventListener(
“单击”，按钮单击操作，错误
);
功能按钮ClickAction（zEvent）{
/*---对于我们的虚拟操作，我们只需在顶部添加一行文本
屏幕的另一端。
*/
var zNode=document.createElement（'p'）；
zNode.innerHTML='按钮已单击'；
document.getElementById（“myContainer”）.appendChild（zNode）；
}
//---使用CSS为我们新添加的元素设置样式。
GM_addStyle（multilestr（函数（）{/*）！
#霉菌容器{
位置：绝对位置；
排名：0；
左：0；
字体大小：20px；
背景：橙色；
边框：3件黑色；
保证金：5px；
不透明度：0.9；
z指数：222；
填充：5px20px；
}
#我的按钮{
光标：指针；
}
#霉素A{
颜色：红色；
背景：白色；
}
*/} ) );
函数multilestr（dummyFunc）{
var str=dummyFunc.toString（）；
str=str.replace（//^[^\/]+\/\*！？/，“”）//带函数（）{/*！
.replace（/\s*\*\/\s*\}\s*$/，“”）//Strip*/}
.replace（/\/.+$/gm，）//双斜杠注释破坏CSS。剥掉它们。
;
返回str；
}

问题是什么？我才意识到我没有问我的问题，现在已经结束了。我会问的

// ==UserScript==
// @name        _Adding a live button
// @description Adds live example button, with styling.
// @include     https://stackoverflow.com/questions/*
// @grant       GM_addStyle
// ==/UserScript==

/*--- Create a button in a container div.  It will be styled and
    positioned with CSS.
*/
var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">'
                + 'For Pete\'s sake, don\'t click me!</button>'
                ;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

//--- Activate the newly added button.
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false
);

function ButtonClickAction (zEvent) {
    /*--- For our dummy action, we'll just add a line of text to the top
        of the screen.
    */
    var zNode       = document.createElement ('p');
    zNode.innerHTML = 'The button was clicked.';
    document.getElementById ("myContainer").appendChild (zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle ( multilineStr ( function () {/*!
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   0;
        font-size:              20px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                222;
        padding:                5px 20px;
    }
    #myButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  red;
        background:             white;
    }
*/} ) );

function multilineStr (dummyFunc) {
    var str = dummyFunc.toString ();
    str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
            .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
            .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
            ;
    return str;
}