通过javascript为实时预览容器解析带有自定义过滤器的django模板标记

我需要使用作为标记语言，为我的django网站创建一个实时预览容器（如stackoverflow和Reddit）

有没有办法在客户端实现这一点？（不使用ajax？）

从视图中解析代码非常简单：

{% load markup %}
{{ theme.content|textile }}

（不用说，我遵循并将

'django.contrib.markup'

添加到我的

安装的应用程序设置中。）

为了简单起见，假设我不需要IE支持。我的JS如下所示：

function change_preview() {
    var fragment = document.createDocumentFragment();
    // I am no sure what should I put here:
    fragment.appendChild(document.createTextNode('{{ theme.content|textile }}'))
    document.getElementById("preview").appendChild(fragment);
}

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("input", change_preview , false );
}

和HTML：

<textarea id="id_content" rows="10" cols="40" name="content"></textarea>
<div id = "preview"></div>



我也发现了。在客户端和服务器端同时使用它是一个好主意吗

最佳实践是什么

我正在寻找非jQuery解决方案，但如果没有其他方法，我会接受

提前谢谢。
因为TEXTIL指定了什么标记对应于什么html，所以我认为JS库和Py库之间不兼容的可能性不大

在即时预览更新的脚本中，您可能希望使用
keyup
事件而不是
input
事件，因为后者仅在
textarea
失去焦点时才会触发

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("keyup", change_preview , false );
}

要使用Ben Daglish的lib（它不基于jQuery），您的事件处理程序如下所示：

function change_preview() {
    var content_box = document.getElementById('id_content');
    var html = convert(content_box.value);
    document.getElementById('preview').innerHTML=html;
}

所以我走对了方向？我希望有一个更简单的解决方案，但我想我还是要使用JS和Python库。谢谢你的帮助。