如何将div更改为to区域，反之亦然，只使用普通的javascript而不使用jquery？
如何将div更改为to区域，反之亦然，只使用普通的javascript而不使用jquery？
提问于 2022-12-01 20:19:24
如何将div更改为文本区域，以便在单击按钮并再次单击同一按钮时编辑div中的文本，然后将该文本区域更改为div。
HTML
<button class="button">click me</button>
<div class="div">this is div or textarea</div>JS
const button = document.querySelector('button');
const div = document.querySelector('div');
let isTextarea = false
button.addEventListener('click', () => {
if(isTextarea) {
const div = document.createElement('div')
const textarea = document.createElement('textarea')
div.innerHTML = textarea.value
textarea.parentNode.replaceChild(div, textarea)
isTextarea = false
}else {
const textarea =document.createElement('textarea')
textarea.innerHTML = div.innerHTML
div.parentNode.replaceChild(textarea, div)
isTextarea = true
}
} )回答 2
Stack Overflow用户
发布于 2022-12-01 20:24:28
您不需要在两个分支中同时创建<div>和<textarea>。如果您有一个textarea，您只需要创建一个div，如果您有一个div，则只需要创建一个文本区域。(引用您刚刚创建并没有追加的元素的textarea.parentNode，会像预期的那样抛出错误--这是没有意义的。)
您需要在文档中选择现有的<div>或<textarea>
const button = document.querySelector('button');
let isTextarea = false
button.addEventListener('click', () => {
if (isTextarea) {
const div = document.createElement('div');
const textarea = document.querySelector('textarea');
div.innerHTML = textarea.value;
textarea.parentNode.replaceChild(div, textarea);
isTextarea = false;
} else {
const textarea = document.createElement('textarea');
const div = document.querySelector('div');
textarea.innerHTML = div.innerHTML;
div.parentNode.replaceChild(textarea, div)
isTextarea = true
}
})<button class="button">click me</button>
<div class="div">this is div or textarea</div>
或者在页面负载上创建两个元素，但最初只追加一个元素。
const button = document.querySelector('button');
const div = document.body.appendChild(document.createElement('div'));
div.textContent = 'this is div or textarea';
const textarea = document.createElement('textarea');
let isTextarea = false
button.addEventListener('click', () => {
if (isTextarea) {
div.innerHTML = textarea.value;
textarea.parentNode.replaceChild(div, textarea);
isTextarea = false;
} else {
textarea.innerHTML = div.innerHTML;
div.parentNode.replaceChild(textarea, div)
isTextarea = true
}
})<button class="button">click me</button>
如果需要，还可以通过检查哪个元素isTextarea来丢弃.isConnected标志。
const button = document.querySelector('button');
const div = document.body.appendChild(document.createElement('div'));
div.textContent = 'this is div or textarea';
const textarea = document.createElement('textarea');
button.addEventListener('click', () => {
if (textarea.isConnected) {
div.innerHTML = textarea.value;
textarea.parentNode.replaceChild(div, textarea);
} else {
textarea.innerHTML = div.innerHTML;
div.parentNode.replaceChild(textarea, div)
}
})<button class="button">click me</button>
Stack Overflow用户
发布于 2022-12-01 20:39:29
除非.div div的第一个子程序必须包含特定的东西，否则您实际上不需要替换该子对象。把你不需要的都藏起来。
let div;
let textarea;
document.addEventListener('DOMContentLoaded', function() {
div = document.querySelector('.div > div');
textarea = document.querySelector('.div > textarea');
document.querySelector('button').addEventListener('click', () => {
div.classList.toggle('hidden')
textarea.classList.toggle('hidden')
} )
textarea.addEventListener('input', () => {
div.innerHTML = textarea.value
} )
}).hidden {
display: none
}<button class="button">click me</button>
<div class="div"><div class="hidden"></div><textarea></textarea></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74650865
复制相关文章
相似问题
腾讯云开发者
