javascript - Javascript 用输入和文本区域替换元素
问题描述
我正在为前端的 Wordpress 博客构建一种迷你块编辑器,我正在尝试使用 javascript 将所有元素从帖子内容转换为一组输入和文本区域。
首先,我创建了一个虚拟元素并将 php 中的帖子内容添加到它:
var dummy = document.createElement( 'div' );
dummy.innerHTML = '<?php echo $text; ?>';
console.log(dummy.innerHTML);
然后 foreach 元素在那里我运行这种替换器,它应该在元素的位置添加输入和文本区域并删除元素本身。
var els = dummy.childNodes;
for(i = 0; i < els.length; i++) {
var text = els[i].textContent;
if (els[i].tagName.toLowerCase() == ("h2" || "h3" || "h4" || "h5" || "h6")) {
// Create an input
var input = document.createElement("input");
input.type = "text";
input.value = text;
input.setAttribute("class","h");
els[i].parentNode.insertBefore(input, els[i]);
} else if (els[i].tagName.toLowerCase() == ("p" || "div")) {
// Create a textarea
var textarea = document.createElement("textarea");
textarea.value = text;
textarea.setAttribute("class","p");
els[i].parentNode.insertBefore(textarea, els[i]);
} else if (els[i].tagName.toLowerCase() == "li") {
// Create an input with class li
var input = document.createElement("input");
input.type = "text";
input.value = text;
input.setAttribute("class","li");
els[i].parentNode.insertBefore(input, els[i]);
}
els[i].parentNode.removeChild(els[i]);
}
最后,我检查结果并将其添加到我的容器中。但是,结果让我感到困惑:
- h3 完全消失
- divs 和 p 在那里
- 结果中没有输入或文本区域
- 控制台没有错误
console.log(dummy.innerHTML);
document.getElementsByClassName('compositecontent')[0].innerHTML = dummy.innerHTML;
解决方案
好的,所以我有一个无效的比较表达式,而不是:
els[i].tagName.toLowerCase() == ("h2" || "h3" || "h4" || "h5" || "h6")
正确的做法是:
["H2","H3","H4","H5","H6"].indexOf(el[i].tagName.toUpperCase()) != -1
因为第一个表达式总是简化为第一个元素。
推荐阅读
- ssis - 卡夫卡与流集
- java - 如何在java中将元素推送到空的固定大小数组
- javascript - 在 contentWindow.document.close() 之后无法编辑 iframe
- python - django 测试中 MultipleChoiceField 的单元测试总是失败
- angular - 如果其中一个发生变化,则更新相同组件的多个选择器
- c# - Xamarin POST 方法没有返回正确的值
- django - 如何在 Django 中使用唯一值自动填充模型现有对象中的新字段?
- xamarin.android - 导航到其他视图时如何解决活动未找到异常?
- python-3.x - 如何使用 chromedriver 和 chrome 模拟 phantomjs 行为,以通过 Python 和 contextlib 使用 Selenium 获取页面上的所有链接
- android - 进度条不显示当前进度