Я создаю своего рода редактор мини-блоков для моего блога Wordpress на веб-интерфейсе, где я пытаюсь использовать javascript для преобразования всех элементов из содержимого публикации в набор входных данных и текстовых полей.
Сначала я создаю фиктивный элемент и добавляю к нему содержимое поста из php:
var dummy = document.createElement( 'div' );
dummy.innerHTML = '<?php echo $text; ?>';
console.log(dummy.innerHTML);
Тогда для каждого элемента там я запускаю этот вид заменителя, который должен добавить входные данные и текстовые области на место элемента и удалить сам элемент.
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 есть
- нет входных данных или textarea в результате
- нет ошибок в консоли
console.log(dummy.innerHTML);
document.getElementsByClassName('compositecontent')[0].innerHTML = dummy.innerHTML;