How to build "big" div structures in JavaScript (JQuery)? - Stack Overflow

admin管理员组

文章数量:1292146

I need to make big DIV structures and append them to a wrapper. But what I've seen so far was always about appending one DIV element into another one.

There is an empty DIV-Wrapper, to be filled with "big" DIV-Elements

<div class="PostWrapper">
    // Content should be added to here
</div>

The DIV-Elements which I want to append to the PostWrapper look like this:

<div class="Post">
    <div class="PostHead">
         <span class="profilePicture">
             <img src="../Profiles/Tom.jpg" />
         </span>
         <span class="userName">Tom</span>
         <span class="postTime">10 minutes ago</span>
    </div>
    <div class="PostBody">
        <p>Hey Tom, great work at the presentation last week. Well done!</p>
    </div>
</div>

So this is an example of a DIV-Structure which I'd like to build and store in a javascript Variable and append to my wrapper like:

var postElement = $("div", {class: "Post"}).append("div", {class: "PostHead"}).append("div", {class: "PostBody"})......

This wont work like expected ofc. But I can't think of a simple way of doing this without having overly plexe code.

How would that be possible?

I need to make big DIV structures and append them to a wrapper. But what I've seen so far was always about appending one DIV element into another one.

There is an empty DIV-Wrapper, to be filled with "big" DIV-Elements

<div class="PostWrapper">
    // Content should be added to here
</div>

The DIV-Elements which I want to append to the PostWrapper look like this:

<div class="Post">
    <div class="PostHead">
         <span class="profilePicture">
             <img src="../Profiles/Tom.jpg" />
         </span>
         <span class="userName">Tom</span>
         <span class="postTime">10 minutes ago</span>
    </div>
    <div class="PostBody">
        <p>Hey Tom, great work at the presentation last week. Well done!</p>
    </div>
</div>

So this is an example of a DIV-Structure which I'd like to build and store in a javascript Variable and append to my wrapper like:

var postElement = $("div", {class: "Post"}).append("div", {class: "PostHead"}).append("div", {class: "PostBody"})......

This wont work like expected ofc. But I can't think of a simple way of doing this without having overly plexe code.

How would that be possible?

• javascript
• jquery
• html
• append

Share Follow edited Feb 1, 2015 at 22:15 Deduplicator 45.7k77 gold badges7272 silver badges123123 bronze badges asked Sep 15, 2014 at 16:11 VinzVinz 3,20844 gold badges3333 silver badges5454 bronze badges 2

• You need to nest them. Otherwise, you're appending each element to Post, not the element inside it. Or try reversing them and using .appendTo. – Barmar Commented Sep 15, 2014 at 16:14
• 2 For anything plex, use a HTML template. That can be as simple as a dummy script block, with an id, that uses an unknown type so the browser ignore it (I use text/template). You then just use the inner html() of the element to create the new structure. Much easier to read/maintain and less error prone. Example added below. – iCollect.it Ltd Commented Sep 15, 2014 at 16:17

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

You can mostly do what you want just by ensuring that you call $(...) for each new element you want to create:

var postElement = $("<div>", {class: "Post"}).append(
   $("<div>", {class: "PostHead"}).append( /* head contents */ ),
   $("<div>", {class: "PostBody"}).append( /* body contents */ )
);

$('#PostWrapper').append(postElement);

NB: <div> not div. The former is used to create elements, the latter only to select them.

For anything plex, use a HTML template. That can be as simple as a dummy script block, with an id, that uses an unknown type so the browser ignore it (I use text/template). You then just use the inner html() of the element to create the new structure. Much easier to read/maintain and less error prone

Example html:

<script id="mytemplate" type="text/template">
    <div class="Post">
        <div class="PostHead">
             <span class="profilePicture">
                 <img src="../Profiles/Tom.jpg" />
             </span>
             <span class="userName">Tom</span>
             <span class="postTime">10 minutes ago</span>
        </div>
        <div class="PostBody">
            <p>Hey Tom, great work at the presentation last week. Well done!</p>
        </div>
    </div>
<script>

then create one with:

$('.PostWrapper').append($('#mytemplate').html());

note: If they need dynamic values anywhere, use text replacement markers in the template and string replaces.

e.g.

<script id="mytemplate" type="text/template">
    <div class="Post">
        <div class="PostHead">
             <span class="profilePicture">
                 <img src="{image}" />
             </span>
             <span class="userName">{name}</span>
             <span class="postTime">{posted}</span>
        </div>
        <div class="PostBody">
            <p>{notes}</p>
        </div>
    </div>
<script>

Or simply add those details once the template has been added to the DOM.

You can also use no .append() at all, and create an element from the entire html structure markup. Just have to escape newlines with an \

var postElement = $('<div class="Post"> \
    <div class="PostHead"> \
         <span class="profilePicture"> \
             <img src="../Profiles/Tom.jpg" /> \
         </span> \
         <span class="userName">Tom</span> \
         <span class="postTime">10 minutes ago</span> \
    </div> \
    <div class="PostBody"> \
        <p>Hey Tom, great work at the presentation last week. Well done!</p> \
    </div> \
</div>');

http://jsfiddle/0089yghq/

You can do it like this:

var $e1 = $("<div/>").addClass("Post");
var $e2 = $("<div/>").addClass("PostHead");
var $e3 = $("<div/>").addClass("PostBody");

var $s1 = $("<span/>").addClass("profilePicture");
var $s2 = $("<span/>").addClass("userName");
var $s3 = $("<span/>").addClass("postTime");

var $i = $("<img/>").attr("src","../Profiles/Tom.jpg");
var $p = $("<p/>").html("Hey Tom, great work at the presentation last week. Well done!");

var $myobj =  
  $e1.append( 
     $e2
       .append( $s1.append($i) ) 
       .append( $s2 ) 
       .append( $s3 ) 
  ) 
  .append( $e3.append( $p ) );

  //now append it to your html

  $myobj.appendTo("body");

I ended doing a similar solution. Just in case someone find it useful.

<div>
    <div id="group">


    </div>
    <input type="button" class="btn btn principal" onclick="addRuleTo('group')" value="Add">
</div>

<script type="text/javascript">
    function addRuleTo(element) {
        var randomId = Math.floor(Math.random() * 10000000);    //* a big number
        var template =
        '<div class="row" style="" id="{{randomId}}"> \
            <div class="col-md-3"></div> \
            <div class="col-md-3"></div> \
            <div class="col-md-5"></div> \
            <div class="col-md-1"><input type="button" class="btn btn-principal" onclick="removeRule({{randomId}})" value="X"></div> \
        </div>';

        template = template.replace(/{{randomId}}/g, randomId);    //global replacement

        $('#' + element).append(template);
    }
    function removeRule(ruleId) {
        $('div#' + ruleId).remove();
    }
</script>

本文标签： How to build quotbigquot div structures in JavaScript (JQuery)Stack Overflow