用输入和文本区域替换Java语言的元素

Question

我正在为前端的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完全消失
• div和p存在
• 结果中无输入或文本区域
• 控制台无错误

console.log(dummy.innerHTML);
document.getElementsByClassName('compositecontent')[0].innerHTML = dummy.innerHTML;

Answer 1

好，所以我有一个无效的比较表达式，而不是：

els[i].tagName.toLowerCase() == ("h2" || "h3" || "h4" || "h5" || "h6")

正确的方法是：

["H2","H3","H4","H5","H6"].indexOf(el[i].tagName.toUpperCase()) != -1

因为第一个表达式总是简化为第一个元素。