Javascript replacing elements with inputs and textareas

Question

I'm building kind of a mini block editor for my Wordpress blog on frontend, where I'm trying to use javascript to convert all elements from post content to a set of inputs and textareas.

At first I create a dummy element and add post content from php to it:

var dummy = document.createElement( 'div' );
dummy.innerHTML = '<?php echo $text; ?>';
console.log(dummy.innerHTML);

Then foreach element there I run this kind of replacer, which should add the inputs and textareas on the place of element and remove the element itself.

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]);
}

In the end I check the result and add it to my container. However, the results confuse me:

h3 dissappears completely
divs and p are there
no inputs or textarea in the result
no errors in console

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

Is this a learning task or a form for a actual site? If this is for a site, you shouldn't manipulate the dom. Instead write the form with React or Vue that will handle data binding to the elements — BenB, Mar 26 '20 at 00:36
@BenB I still don't understand, why I shouldn't manipulate the DOM. It works well, and I know vanilla js better than react. React is owned by Facebook and is forced by them, but if you are not working for Facebook, then why do you suggest using third-party software over native javascript? — Sam Tyurenkov, May 20 '20 at 11:01
https://stackoverflow.com/questions/31032855/why-is-it-considered-a-bad-idea-to-manipulate-dom-in-controllers — BenB, May 22 '20 at 18:12

score 0 · Answer 1 · answered Mar 26 '20 at 18:56

Ok, so I had an invalid comparison expression, instead of:

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

the correct approach is to:

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

Because first expression is always simplified to first element.

Javascript replacing elements with inputs and textareas

1 Answers1