允许用户向html页面添加按钮[重复]

Question

我有一个在网络浏览器中本地运行的 html 页面，并且在代码中我有一系列链接。链接包裹在按钮周围，并且按钮使用 CSS 设置样式。我经常需要添加链接，所以我想直接在页面上放置一个“新链接创建者”，并根据输入框中的 url 创建一个按钮。以下是一些链接和它们周围的代码：

<div class='m'>
    <a href='https://stackoverflow.com/' target='_blank'><input type='button' class='menu' value='Stack Overflow'></a>
    <a href='https://puzzling.stackexchange.com/' target='_blank'><input type='button' class='menu' value='Puzzling Stack Exchange'></a>
    <a href='https://pastebin.com/' target='_blank'><input type='button' class='menu' value='Pastebin'></a>
    <a href='https://github.com/' target='_blank'><input type='button' class='menu' value='GitHub'></a>
    <a href='https://scholar.google.com/' target='_blank'><input type='button' class='menu' value='Google Scholar'></a>
    <a href='https://google.com/' target='_blank'><input type='button' class='menu' value='Google'></a>
    <a href='https://encrypted.google.com/' target='_blank'><input type='button' class='menu' value='Encrypted Google'></a>
</div>

这是我迄今为止在解决问题方面取得的进展（基本上没有）：

<div class='tb'>
    <input type='text' id='get_url'></input>
    <input type='button' value='Create New Button' onclick='newbutton();'></input>
</div>

哪个指向这个JS：

function newbutton() {
    var url = document.getElementById('get_url');
    // ... make button with the given url
    }

感谢任何帮助。如果我需要包含更多代码（例如我的 CSS），请在 cmets 中告诉我。

JSFiddle

Answer 1

function newbutton() {
    var div = document.querySelector('.m');
    var input = document.querySelector('#get_url');
    // ... make button with the given url

    var dom = '<a href="' + input.value + '" target="_blank">';
    dom += '<input type="button" class="menu" value="new button"></a>';

    div.innerHTML += dom;
}

这是可以创建新按钮元素的代码，但您需要自己考虑一些步骤。这只是一个基本的想法。

1. 网址格式

上面的代码只能识别准确的url，比如https://google.com。如果 url 不正确，按钮将无法识别它并将您重定向到那里。因此，您应该考虑涵盖所有可能情况的算法。

1. 数据不会被保存。

即使您创建了一个包含新 url 的新按钮，它也不会存储在您的 web 中，因为生成新 DOM 的行为只是来自一个函数。这意味着，您的原始 HTML 文件默认不包含它。所以，如果你也想存储它，你最好考虑数据库或 webStorage。

1. 有更好的方法来创建 DOM，而不是 innerHTML

我使用innerHTML 创建了一个 DOM。但是，如果有更好的方法怎么办？使用innerHTML 并不是创建DOM 的好选择，尽管它看起来非常有用和方便。有几个原因，您可以查看下面的这些链接。我不会深入解释所有差异，因为你的问题不在上面，只是让你知道。还有其他选择，所以我建议您找出差异！

• innerHTML
• innerText
• 文本内容
• createElement()
• createTextnode()
• 等

in general, in javascript, isn't using innerHTML an [in]security issue?

innerText vs innerHtml vs label vs text vs textContent vs outerText

Security comparison of eval and innerHTML for clientside javascript?