英文:
Changing an element with another element in js
问题
我有一个按钮：
<button aria-label="Custom" aria-selected="false" class="ButtonContainer">
<div class="DivNumContainer">
<span class="SpanNumDisplay">Custom</span>
</div>
</button>
我想要的是，当点击这个按钮时，将文本“Custom”更改为以下代码中的输入框：
<input
type="number "
pattern="[0-9]*"
aria-describedby="error-tip"
class="InputNum"
value=""
></input>
有什么建议吗？
我尝试使用以下脚本，但没有成功：
function repFun() {
// 创建一个“input”元素
var H = document.createElement('input');
H.setAttribute('type', 'number');
H.setAttribute('pattern', '[0-9]*');
H.setAttribute('aria-describedby', 'error-tip');
H.setAttribute('class', 'InputNum');
H.setAttribute('value', '');
// 创建文本节点
var txt = document.createTextNode('');
// 获取要替换的元素
var repNode = document.querySelector('.SpanNumDisplay');
// 替换元素
repNode.innerHTML = '';
repNode.appendChild(H);
}
英文:
I have a button:
<button aria-label="Custom" aria-selected="false" class="ButtonContainer">
<div class="DivNumContainer">
<span class="SpanNumDisplay">Custom</span>
</div>
</button>
I want when this button is clicked to change the text "Custom" into a input type box with this code:
<input
type="number "
pattern="[0-9]*"
aria-describedby="error-tip"
class="InputNum"
value=""
></input>
Any suggestions?
I have tried using this script but didnt work
function repFun() {
// Creating "input" element
var H = document.createElement('input type="number " pattern="[0-9]*" aria-describedby="error-tip" class="InputNum" value=""');
// Creating Text node
var txt = document.createTextNode("");
// Accessing the Element we want to replace
var repNode = document.getElementsByClassName('.SpanNumDisplay');
// Appending Text Node in Element
H.appendChild(txt);
// Replacing one element with another
repNode.replaceChild(H, repNode.childNodes[0]);
}
答案1
得分: 1
- 你应该只把文本放在按钮内部。我不确定你尝试用所有的 div 和 span 元素来实现什么，但你可以简单地将按钮设置为：
<button ..allyourattrs...>自定义</button>
- 你不能像那样创建元素，添加属性必须在事后进行（方法 A）。但你可以通过创建一个临时元素并设置其 innerHTML 的方式来以类似于你原始代码的方式创建元素（方法 B）。
// 方法 A
const inputElem = document.createElement('input');
inputElem.type = 'number';
... 等等
// 方法 B
const temp = document.createElement('div');
temp.innerHTML = '<input type="number" pattern="[0-9]*" aria-describedby="error-tip" class="InputNum" value="">';
// 通过 temp.firstChild 访问你的新输入元素
- 关于第一点的类似情况，你不应该试图替换自定义按钮的内容为新的输入元素，你可以要么替换按钮本身，要么将其设置为切换按钮，然后只需将输入元素附加为兄弟元素。
上述内容可以实现如下：
<button aria-label="自定义" aria-selected="false" class="ButtonContainer" onclick="swap(this)">自定义</button>
<script>
function swap(buttonElem) {
const temp = document.createElement('div');
temp.innerHTML = '<input type="number" pattern="[0-9]*" aria-describedby="error-tip" class="InputNum" value="">';
buttonElem.replaceWith(temp.firstChild);
}
</script>
英文:
Three things:
- You should really just stick to putting text inside a button. I'm not sure what you're trying to accomplish with all div and span stuff, but you can just have the button as:
<button ..allyourattrs...>Custom</button>
- You can't create elements like that, adding attributes must be done after the fact (method A). You can however create elements in a similar fashion to your original code by instead creating a temp element and setting its innerHTML (method B).
// Method A
const inputElem = document.createElement('input');
inputElem.type = 'number';
... etc
// Method B
const temp = document.createElement('div');
temp.innerHTML = '<input type="number" pattern="[0-9]*" aria-describedby="error-tip" class="InputNum" value="">'
// access your new input elem via temp.firstChild
- On a similar note to #1, you shouldn't be trying to replace the contents of the custom button with your new input, you can either replace the button itself, or set it up as a toggle and just have the input be appended as a sibling.
Everything above would be implemented as:
<button aria-label="Custom" aria-selected="false" class="ButtonContainer" onclick="swap(this)">Custom</button>
<script>
function swap(buttonElem) {
const temp = document.createElement('div');
temp.innerHTML = '<input type="number" pattern="[0-9]*" aria-describedby="error-tip" class="InputNum" value="">'
buttonElem.replaceWith(temp.firstChild)
}
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论