Question

我正在尝试使用表单值自动实现HTML 当用户在表单中输入信息时，JS将为他创建对应的HTML。

例如。

<div class="row" id="1">
    <div class="form-group col-lg-2">
        <select class="form-control" name="tag">
            <option value="p" selected>p</option>
            <option value="br">br</option>
        </select>
    </div>
    <div class="form-group col-lg-2">
        <select class="form-control" name="class">
            <option value="Day" selected>Day</option>
            <option value="BlockTime">BlockTime</option>
            <option value="BlockTitle">BlockTitle</option>
            <option value="Session">Session</option>
            <option value="Person">Person</option>
            <option value="Firm">Firm</option>
        </select>
    </div>
    <div class="form-group col-lg-7">
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>
    <div class="form-group col-lg-1">
        <input type="button" class="btn btn-default" onclick="addLine()" value="Add">
    </div>
</div>

用户选择了P，日，测试消息，然后按＆＃34;添加＆＃34;按钮，该按钮将调用函数addLine()。主要部分如下，我没有做对。

var currentTag = currentLine.find("select[name='tag'] option:selected").text();
var currentClass = currentLine.find("select[name='class'] option:selected").text();
var currentText = currentLine.find("textarea").val();

var new_content = $("<currentTag></currentTag>").addClass(currentClass).html(currentText);

现在currentTag将获得价值＆＃34; p＆＃34;，currentClass将获得＆＃34; Day＆＃34;，currentText得到＆＃34;测试消息＆＃34;，这已经完成。

这就是我想要的，jQuery创建这样的HTML代码：

<p class="Day">Test message</p>

我想将HTML代码存储到名为new_content的变量中。 ...

Answer 1

如果您有这些元素的容器，您可以将它们附加到它：

首先，您要将新行设置为变量：

var newElements = [];
var i = 0; //Make an index counter so you can use it later if you want to.  This is optional
/* Do your selection script */
    var htmlElement = "<" + currentTag + " class='" + currentClass + "'>" + currentText + "</" + currentTag + ">";
    newElement.push(htmlElement, i);
    $('.container').append(htmlElement);
    i++;  //increment your i to create an index
/* Make sure all of this is inside your selection script. */

使用表单输入值通过jQuery创建HTML元素

1 个答案: