英文:
How to add a HTML button in JavaScript code?
问题
我要翻译的内容：
如何在JavaScript中调用函数时，只在HTML中添加一个按钮？我有一个函数，当您在文本框中写入一些文本并单击按钮时，该文本将显示在HTML上，但我想在文本旁边添加一个弹出的按钮。我该如何在JavaScript代码中编写这部分？
英文:
How do I add a button that only shows up in HTML when a function is called in JavaScript? I have a function where when you write some text in a text-box and click on a button - that said text was written on the HTML, but I want to add a button next to the text that pops up. How do I write that in the JavaScript code?
答案1
得分: 2
你是指这样的吗？
<script>var btn = document.createElement("BUTTON");btn.innerHTML = "New Button";function appendButton(){document.getElementById("container").appendChild(btn);}</script><div id='container'><button id='button1' onclick="appendButton()">Click Me</button></div>
英文:
Do you mean something like this?
<script>var btn = document.createElement("BUTTON");btn.innerHTML = "New Button";function appendButton(){document.getElementById("container").appendChild(btn);}</script><div id='container'><button id='button1' onclick="appendButton()">Click Me</button></div>
答案2
得分: -1
以下是翻译好的部分：
在JavaScript中添加HTML按钮有点多余，因为你可以直接在HTML中编写它。
你可以使用.append() JavaScript函数与Jquery一起使用：
$(function(){$('button').on('click',function(){var r= $('<input type="button" value="new button"/>');$("body").append(r);});});
英文:
It is kind of useless to add a HTML button in Javascript when you can just write it in HTML.
You can use the .append() Javascript function with Jquery:
$(function(){$('button').on('click',function(){var r= $('<input type="button" value="new button"/>');$("body").append(r);});});
答案3
得分: -1
如何钓鱼：反复使用一个函数，这样你就不必一次又一次地重新弄清楚。我为我的网络平台保留了一组大量可重用的函数。
有一个注意事项：我编写严格的代码，所以如果只有一个元素，只需在任何地方添加 xmlns="http://www.w3.org/1999/xhtml"属性/值即可。如果你需要多个元素，你将需要一个包含所有具有 xmlns="http://www.w3.org/1999/xhtml" XML命名空间的子元素的单个包含父元素。我在这方面的效率非常高，因为它是严格的代码。
在本帖底部需要两个先决函数。
xml_add('before', id_('element_after'), '<input type="button" xmlns="http://www.w3.org/1999/xhtml" />');xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');
添加多个元素（命名空间只需要在父元素上）：
xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');
动态可重用代码：
function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}function xml_add(pos, e, xml){e = (typeof e == 'string' && id_(e)) ? id_(e) : e;if (e.nodeName){if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}//添加片段并将其返回。}}
英文:
How to fish: use a function over and over again so you don't have to keep figuring this out. I keep a large set of highly reusable functions for my web platform.
There is one caveat: I code strict so if it's a single element just add the xmlns="http://www.w3.org/1999/xhtml" attribute/value any where. If you need multiple elements you'll need a single containing parent that contains all the child elements that has the xmlns="http://www.w3.org/1999/xhtml" XML namespace. I run circles in efficiency with this stuff because it's strict code.
There are two prerequisite functions needed at the bottom of this post.
xml_add('before', id_('element_after'), '<input type="button" xmlns="http://www.w3.org/1999/xhtml" />');xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');
Add multiple elements (namespace only needs to be on the parent element):
xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');
Dynamic reusable code:
function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}function xml_add(pos, e, xml){e = (typeof e == 'string' && id_(e)) ? id_(e) : e;if (e.nodeName){if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}//Add fragment and have it returned.}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论