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

Question

I am trying to implement automatically HTML using form value.
When user enter the information in the form, the JS will create the correspond HTML for him.

For example.

<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>

The user selected P, Day, Test message, and the press "Add" button, the button will call function addLine() . The main part is below, I didn't make it right.

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

Now the currentTag will get the value "p", currentClass will get "Day", currentText do get "Test message", this has been done.

This is what I want, the jQuery creates HTML code like this:

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

And I want to store the HTML code to a variable called new_content . ...

Answer 1

If you have a container for these elements, you could just append them to it:

First you want to set your new line as a variable:

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. */