直接在书签中构建表单，有没有更简洁的方法？答案

【问题标题】：building a form directly in a bookmarklet, is there a less verbose method?直接在书签中构建表单，有没有更简洁的方法？
【发布时间】：2022-12-28 14:08:05
【问题描述】：

我正在构建一个小书签以直接向 API 提交表单。出于这个原因，我想在小书签中构建表单。到目前为止，我得到了这个（很粗糙）：

let popup = window.open("","","height=350, width=700, popup");
popup.document.open();
let html = popup.document.appendChild(document.createElement("html"));
html.appendChild(document.createElement("head"));
let body = html.appendChild(document.createElement("body"));
let form = body.appendChild(document.createElement("form"));
form.setAttribute("method", "post");
form.setAttribute("action", "");
let url_input = form.appendChild(document.createElement("input"));
let loc = location.href;
url_input.setAttribute("type", "text");
url_input.setAttribute("name", "url");
url_input.setAttribute("value", loc);
let submit_input = form.appendChild(document.createElement("input"));
submit_input.setAttribute("type", "submit");
submit_input.setAttribute("value", "add bookmark");

我需要添加 3 或 4 个输入（其中一些是动态的，如 url_input），可能还有一些 CSS。是否有更易于管理/更有效的方式来构建此表单？

【问题讨论】：

我知道这并不是您问题的真正答案，但我个人会选择浏览器扩展。构建和维护可能会容易得多。

标签： javascript bookmarklet

【解决方案1】：

一种选择是构造一个 HTML细绳，然后将其插入。打开的窗口也已经有一个可以使用的<body>。

const popup = window.open("","","height=350, width=700, popup");
popup.document.body.insertAdjacentHTML('beforeend', `
<form method="post" action="">
  <input
    type="text"
    name="url" 
    value="${location.href}"
  >
  <input type="submit" value="add bookmark">
</form>
`);

【讨论】：