0

我正在为静态博客构建提交表单。该表格位于此处:

https://archwomen.org/blog/submit

我有一个降价预览,但我也想有一个 html 预览。

这是想法:

当有人点击“html”按钮时,我需要这个 html 标记:

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

要更改为:

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

当有人单击“实时”按钮时,我希望将 html 标记改回来。我希望用纯 javascript 来做到这一点,但到目前为止我还没有多少运气。我在这里设置了一个jsfiddle:

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

任何帮助将不胜感激。

4

3 回答 3

0

尝试

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

演示:小提琴

于 2013-07-27T15:54:31.737 回答
0

jQuery:如何更改标签名称?

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

更好地创建两个元素并切换它们的可见性。

于 2013-07-27T15:56:18.877 回答
0

我稍微更改了代码: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);
}
于 2013-07-27T15:59:46.953 回答