Javascript - change html tag on button click

Question

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

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.

as for me, i'd prefer to have two elements and to switch visibility/change content on button click — Igor Dymov, Jul 27 '13 at 15:45
You can't use [`createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/document.createElement) like that, even after fixing the quoting error in it. — Teemu, Jul 27 '13 at 15:46

score 0 · Accepted Answer · answered Jul 27 '13 at 15:54

Try

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

Demo: Fiddle

Thanks! That works great! I appreciate it! I just have to integrate the markdown script so it will update for live and html previews. Once its finished, I'm going to release the form on github for other people to use. :D — Dolores, Jul 27 '13 at 18:54

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

jQuery: how to change tag name?

http://www.webmaster-talk.com/javascript-forum/71713-changing-a-tag-one-element-another.html

Better create two elements and switch their visibility.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 27 '13 at 15:56

Rahul K

665
10
25

I played around with having ```
``` And then used javascript to switch the ids, but the markdown output wasn't retained in the text box. [demo](https://archwomen.org/test/javascript/swap.html) – Dolores Jul 27 '13 at 18:48

score 0 · Answer 3 · answered Jul 27 '13 at 15:59

I've changed the code a little bit: 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);
}

Javascript - change html tag on button click

3 Answers3