0

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

这是我所拥有的：

//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我上面包含的方法可能会失败，但我知道如何解决这个问题。

感谢您的时间！

4

1 回答 1

1

几件事：

  • 是否有可能通过 AJAX (javascript) 添加表单？

  • 使用document.querySelector()Doc或jQuery来获取表单（或其他任何东西）。这为您提供了CSS 选择器的灵活功能。

  • 对于一个<p>元素，不要将其设置innerHTML为另一个<p>

  • 是searchyTimeGo()由页面定义还是由您的脚本定义？如果由你，那么永远，永远，使用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");
}
于 2013-05-31T08:34:17.127 回答