javascript - Javascript - change html tag on button click

Question

I'm building a submission form for a static blog. The form is located here:

https://archwomen.org/blog/submit

I have a markdown preview, but I would also like to have an html preview.

Here is the idea:

When someone clicks on the "html" button, I need this html markup:

<div id="preview"></div>

To get changed to this:

<textarea readonly id="preview"></textarea>

And when someone clicks on the "live" button, I want the html markup to get changed back. I was hoping to do this with pure javascript but so far I haven't had much luck. I setup a jsfiddle here:

http://jsfiddle.net/Lc2Yg/

function transformTag(tagId){
    var elem = document.getElementById(tagId);
    var children = elem.childNodes;
    var parent = elem.parentNode;
    var newNode = document.createElement("textarea readonly id="preview"");
    for(var i=0;i<children.length;i++){
        newNode.appendChild(children[i]);
    }
    parent.replaceChild(newNode,elem);
}

Any help will be greatly appreciated.

Answer 1

試す

window.transformTag = function(type, tagId){
    var elem = document.getElementById(tagId), newNode;
    var children = elem.childNodes;
    var parent = elem.parentNode;

    if(type == 'input'){
        newNode = document.createElement("textarea");
        newNode.readOnly = true;
        newNode.value = elem.innerHTML;
    } else {
        newNode = document.createElement("div");
        newNode.readOnly = true;
        newNode.innerHTML = elem.value;
    }
    newNode.id = tagId;
    parent.replaceChild(newNode, elem);
}

デモ:フィドル

Answer 2

コードを少し変更しました: http://jsfiddle.net/Lc2Yg/2/

function transformTag() {
    var elem = document.getElementById('preview');
    var edited_area = document.getElementById('text-input');
    var parent = elem.parentNode;
    var newNode = document.createElement("textarea");
    newNode.rows = 25
    newNode.cols = 25
    newNode.readOnly = true
    newNode.value = edited_area.value
    parent.replaceChild(newNode,elem);
}