我正在为一个静态博客构建一个提交表单。表单位于此处:
https://archwomen.org/blog/submit
我有一个markdown预览,但我也想有一个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);
}
任何帮助都将不胜感激。
尝试
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);
}
演示:Fiddle
http://www.webmaster-talk.com/javascript-forum/71713-changing-a-tag-one-element-another.html
更好地创建两个元素并切换它们的可见性。
我对代码做了一些更改: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);
}