Question

我有一个html页面，我在Web浏览器中本地运行，在代码中我有一系列链接。链接围绕按钮，按钮使用CSS设置样式。我经常要添加链接，所以我想放一个新的链接创建者＆＃34;直接在页面上创建一个基于输入框中的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），请在评论中告诉我。

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;
}

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

网址格式

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

不会保存数据。

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

有一种更好的方法来创建DOM，而不是innerHTML

我使用innerHTML创建了一个DOM。但是，如果有更好的方法呢？使用innerHTML并不是制作DOM的好选择，即使它看起来非常有用和方便。有几个原因，您可以查看以下链接。我不打算深刻解释所有的差异，因为你的问题不在其中，而是让你知道。还有其他选择，所以我建议你找出差异！

的innerHTML
的innerText
的textContent
的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?

Answer 2

我认为您需要另一个input[type=text]来获取新创建的button的值。请尝试以下方法：

＆＃13;

function newbutton() {
  var url = document.getElementById('get_url').value;
  var txt = document.getElementById('get_text').value;
  var el = document.querySelector('div.m a');
  var cloneAnchor = el.cloneNode(true);
  var container = document.getElementsByClassName('m');
  container[0].appendChild(cloneAnchor);
  var newAnchor = document.querySelector('a:last-child').setAttribute('href',url);
  var length = document.querySelectorAll('a>input').length;
  document.querySelectorAll('input')[length-1].setAttribute('value',txt);
}

＆＃13;

<div class='m'>
    <a href='https://stackoverflow.com/' target='_blank'><input type='button' class='menu' value='Stack Overflow'></input></a>
    <a href='https://puzzling.stackexchange.com/' target='_blank'><input type='button' class='menu' value='Puzzling Stack Exchange'></input></a>
    <a href='https://pastebin.com/' target='_blank'><input type='button' class='menu' value='Pastebin'></input></a>
    <a href='https://github.com/' target='_blank'><input type='button' class='menu' value='GitHub'></input></a>
    <a href='https://scholar.google.com/' target='_blank'><input type='button' class='menu' value='Google Scholar'></input></a>
    <a href='https://google.com/' target='_blank'><input type='button' class='menu' value='Google'></input></a>
    <a href='https://encrypted.google.com/' target='_blank'><input type='button' class='menu' value='Encrypted Google'></input></a>
</div>

</div class='tb'>
    <input type='text' id='get_url' placeholder="url"></input><input type='text' id='get_text' placeholder="button text"></input>
    <input type='button' value='Create New Button' onclick='newbutton();'></input>
</div>

＆＃13;

允许用户将按钮添加到html页面

2 个答案: