How to put a HTML tag to another HTML tag with Javascript

Question

I would like to put a <div id="all_content"> element into <sector id="all_field"> element with Javascript

<section id="all_field"></section>
<div id="all_content">
    <h1>---&nbsp;&nbsp;Meeting Room Booking&nbsp;&nbsp;---</h1>
    <fieldset class="box"><legend class="booking_meetRom">Approved Status of Meeting</legend>
        <div><a>More Detail</a> </div>
    </fieldset>
    <fieldset class="box"><legend class="booking_meetRom">123</legend>
        <div>123</div>
    </fieldset>
</div>

Here is JSFIDDLE: http://jsfiddle.net/Y6MpQ/

It should be like this:

<section id="all_field">
<div id="all_content">
    <h1>---&nbsp;&nbsp;Meeting Room Booking&nbsp;&nbsp;---</h1>
    <fieldset class="box">
        <legend class="booking_meetRom">Approved Status of Meeting</legend>
        <div><a>More Detail</a> </div>
    </fieldset>
    <fieldset class="box">
        <legend class="booking_meetRom">123</legend>
        <div>123</div>
    </fieldset>
</div>
</section>

JSFIDDLE should be: http://jsfiddle.net/Y6MpQ/1/

Rajaprabhu Aravindasamy · Accepted Answer · 2014-04-25 04:35:00Z

3

Try to use .append() in this context,

$('#all_field').append($('#all_content'));

DEMO

answered Apr 25, 2014 at 4:35

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PMay 1903 Over a year ago

That's great :-) Thank you very much. Do you think that <section> element will work with IE 8? If not, is there any others element for changing?

Rajaprabhu Aravindasamy Over a year ago

@PMay1903 No.. its a kind of html5 tag. only ie >= 9 will support html 5.

Rajaprabhu Aravindasamy Over a year ago

@PMay1903 <div> should be a great alternative for <section> like tags.

PMay 1903 Over a year ago

It's awesome. I have changed <section> to <div> and it worked as before with IE=8. Thanks again :-).

sshet · Accepted Answer · 2014-04-25 04:41:03Z

2

With Jquery you can use append

$html = '<div id="all_content">';
$html += '<h1>---&nbsp;&nbsp;Meeting Room Booking&nbsp;&nbsp;---</h1>';
$html += '<fieldset class="box">';
$html += '<legend class="booking_meetRom">Approved Status of Meeting</legend>';
$html += '<div><a>More Detail</a> </div>';
$html += '</fieldset>';
$html += '<fieldset class="box">';
$html += '<legend class="booking_meetRom">123</legend>';
$html += '<div>123</div>';
$html += '</fieldset>';
$html += '</div>';

$('#all_content').append($html);

edited Apr 25, 2014 at 4:41

answered Apr 25, 2014 at 4:35

sshet

1,1541 gold badge6 silver badges18 bronze badges

3 Comments

Rajaprabhu Aravindasamy Over a year ago

This will throw error. proper concatenation should be applied.

skzryzg Over a year ago

why would you use the dollar sign for variable declaration?

PMay 1903 Over a year ago

That is OK. Thank you for your code but there is something that needs you to change :-)

Kyo · Accepted Answer · 2014-04-25 04:45:48Z

2

Using pure JavaScript:

var field = document.getElementById('all_field');
var content = document.getElementById('all_content');

field.innerHTML = content.outerHTML;
content.remove();

See the working code at:

JSFiddle

answered Apr 25, 2014 at 4:45

Kyo

9645 silver badges10 bronze badges

2 Comments

PMay 1903 Over a year ago

Thank you for your comment. This might work well. However, Do you think that it might not be optimized as minimum as Rajaprabhu Aravindasamy's method?

Kyo Over a year ago

This is a pure JS solution, no JQuery is needed. For some folks, this is considered the bare minimum solution :)

guest271314 · Accepted Answer · 2014-04-25 05:16:53Z

1

$("#all_content").prependTo("#all_field")

jsfiddle http://jsfiddle.net/guest271314/sjMqL/

answered Apr 25, 2014 at 5:16

guest271314

1

Comments

Ryan Smith · Accepted Answer · 2014-04-25 04:35:41Z

0

Try:

document.getElementById("all_field").innerHTML = "<div id="all_content">";

or JQuery:

$("#all_field").html("<div id="all_content">");

answered Apr 25, 2014 at 4:35

Ryan Smith

6942 gold badges6 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to put a HTML tag to another HTML tag with Javascript

5 Answers 5

DEMO

4 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related