使用 Jquery 的特定 HTML 代码生成器

Question

我做了一个网站，但现在我有了一个制作代码生成器的想法。您必须在文本框中插入文本，它会生成代码。

$("input").keyup(function() {
    $("#result").text(
        '<div width="' + $("#width").val() + 
        'px" height="' + $("#height").val() + 
        'px">' + $("#content").val() + 
        '</div>');
});

我在 http://jsfiddle.net/NzFeb/ 上找到了这个解决方案，但它不适用于我的代码。

您可以在http://go.filiparag.com/mnmuis-generator 看到我所做的（CSS 和标记），但现在我需要 Jquery 代码。

我用 Jquery 做了什么（它不起作用）：

$("input").keyup(function() {
 $("#code").text(

        '<!--POST-->
        <div id="post"> <div id="' + $("#tag").val() + '" class="tag_post"></div>
            <a href="' + $("#image-link").val() + '" data-lightbox="' + $("#title").val() + '" title="' + $("#title").val() + '">
            <img src="' + $("#image-link").val() + '" width="'IMAGE_WIDTH'" height="'IMAGE_HEIGHT'" id="post-image-right"/> </a>
            <text id="post-title">' + $("#title").val() + '</text> <br>
            <text id="post-short-story">' + $("#short-story").val() + '</text> <br> <br>
            <text id="post-text">

            ' + $("#story").val() + '

            </text>
        </div>
        <!--POST END-->'

        );
    });

这些 id 来自 <input type="text"> 和 <textarea>。

Answer 1

如果我正确理解您的问题，这是所需的代码或结果http://jsfiddle.net/NzFeb/ 如果是这样，那么你的问题就在这里

' width="'IMAGE_WIDTH'" height="'IMAGE_HEIGHT'"'
 // is IMAGE_WIDTH a variable or part of the string

 // if its a variable use the plus sign
 ' width="' + IMAGE_WIDTH + '" height="' + IMAGE_HEIGHT + '"'

 // if its part of the string remove the single qoute
 ' width="IMAGE_WIDTH" height="IMAGE_HEIGHT"'

如果我指向的小提琴不是所需的代码，则将 text() 更改为 html()

$("#code").html(

旁注：<text> 不是有效的 html 标记