Question

我是一名新手程序员，试图在工作中自动执行极其冗余的任务我想插入一些表单元素和一个文本按钮，但我找不到正确的方法。

这就是我所拥有的：

//function stuff

var searchyText = document.createElement("TEXTAREA");
var searchyDiv = document.createElement("P");
    searchyDiv.innerHTML="<p><a href='#' onClick='searchyTimeGo()'>Click to Search</a></p>";

document.forms[0] ... ?

//    document.insertBefore(searchyDiv, document.forms[0]);
//    document.insertBefore(searchyText, searchyDiv);

问号是我迷路的地方，而底部的评论是我到目前为止尝试失败的结果。

我无法让文字显示在页面上。我已经看了几个视频教程，并意识到我确实知道对节点的蹲伏。页面上只有一个表单。

当我尝试将原始HTML连接到form[0].innerHTML时，我已经有几次“未定义”来编写自己。即便尝试，我也感到肮脏和丑陋，但它仍然无效。

我知道上面列出的onClick方法可能会失败，但我知道如何解决这个问题。

感谢您的时间！

Answer 1

有几件事：

是否有可能通过AJAX（javascript）添加表单？
使用document.querySelector()^Doc或其他jQuery来获取表单（或其他任何内容）。这为您提供了CSS selectors的灵活力量。
对于<p>元素，请勿将innerHTML设置为另一个<p>
页面或脚本是否定义了searchyTimeGo()？如果由您，never，ever，请使用onclick（或类似）。
它的名称为searchyDiv，但您要创建一个段落（<p>）。
看起来您正在尝试在表单之前添加元素，而不是在其中添加元素？
使用DOM方法。通常避免使用innerHTML。

将所有代码放在一起就是（假设没有AJAX）：

//-- This gets the FIRST form.
var targForm    = document.querySelector ("form");
if (targForm) {
    var searchyText = document.createElement ("TEXTAREA");
    var searchyDiv  = document.createElement ("DIV");
    var searchyPghp = document.createElement ("P");
    var searchyBtn  = document.createElement ("A");

    searchyBtn.textContent  = "Click to Search";
    searchyBtn.href         = "#";

    searchyBtn.addEventListener ("click", searchyTimeGo,   false);

    searchyDiv.appendChild  (searchyPghp);
    searchyPghp.appendChild (searchyBtn);

    targForm.parentNode.insertBefore (searchyText, targForm);
    targForm.parentNode.insertBefore (searchyDiv, targForm);
}
else {
    alert ("No form found on the page!");
}

function searchyTimeGo () {
    //- DO WHATEVER, HERE.
    console.log ("Search button clicked");
}

或一个完整的脚本，显示jQuery方式：

// ==UserScript==
// @name     _Add custom form elements
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var firstForm = $("form:first");
if (firstForm.length) {
    firstForm.insertBefore (
          '<textarea id="gmMyTextArea"></textarea>'
        + '<div id="gmMySrchDiv"><p><a href="#">Click to Search</a></p></div>'
    );

    $("#gmMySrchDiv > p > a").on ("click", searchyTimeGo);
}
else {
    alert ("No form found on the page!");
}

function searchyTimeGo () {
    //- DO WHATEVER, HERE.
    console.log ("Search button clicked");
}

使用Greasemonkey将元素插入表单中？

1 个答案: