Question

我想弄清楚的是如何制作一个按钮，当你点击时，它将用文本框替换自己。我在W3Schools网站上找到了这个代码，并且无法弄清楚如何将javascript（或HTML）元素放入其中。

<p>Click the button to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<p id="demo">Visit Microsoft!</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("Microsoft", "W3Schools");
    document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>
<input type="text" name="textbox" value="textbox"><br>

最后我希望能够用我放在html标签之外的文本框替换按钮

Answer 1

我不建议您使用innerHTML替换方法。

以下是您可以使用replaceChild

的步骤

获取所选元素的父节点
使用replaceChild

这里是代码

// create the new element (input)
var textBox = document.createElement("input");
textBox.type = "text";

// get the button
var button = document.getElementById("demo");
// reference to the parent node
var parent = element.parentNode;
// replace it
parent.replaceChild(textBox, button);

在较旧的浏览器上，您可能需要一个简单的不同解决方案。

var parent = button.parentNode;
var next = button.nextSibling;
// remove the old
parent.removeChild(button);
// if it was not last element, use insertBefore
if (next) {
   parent.insertBefore(textBox, next);
} else {
   parent.appendChild(textBox);
}

Answer 2

我最终找到了一个可以使用http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript

的代码

onClick用新的javascript元素替换javascript元素

2 个答案: