CODEWITHSUNDEEP
javascriptjqueryhtml
sourcey
sourcey

Reputation: 2691

HTML insertion using Javascript

<div id="container" class "container-class">
   <ul class="table-list">
     <li id="element1" class="listless">
        <div class="table-list-cell">
           <span class="labels">...</span>
               INSERT HTML HERE
           <div class="div">

I want to insert a label at the spot marked in the code

How do I do this in Javascript?

I had an attempt that didn't work here

function addLabel($label) {
  $('#container .table-list').append($label);
}

Upvotes: 0

Views: 119

Answers (6)

Vipin
Vipin

Reputation: 877

You can use jquery append() function to achieve this.

$('#container .table-list .labels').append('New Label Value');

jsfiddle

Upvotes: 1

Kevin Putrajaya
Kevin Putrajaya

Reputation: 39

jQuery's .after() is what you're looking for.

And if what you want is inserting a <label/> element, you can use $('<label/>') (documentation) to create it.

This is a full example:

function addLabel(content) {
    var label = $('<label/>').text(content);
    $('#container .table-list-cell .labels').after(label);
}

addLabel('label text');

Check it out on JSFiddle.

Note: by the way, you forgot the equal sign on your #container class attribute.

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5610

jQuery :

function addLabel($label) {
    $('.table-list .labels').append($label);
}

Alternatively, you can always go with pure javascript if you want some speed into that:

Javascript:

function addLabel(label) {
    var list = document.querySelectorAll('.table-list .labels');
    [].forEach.call(list, function(element) {
        element.appendChild(label);
    });
}

Upvotes: 0

Chris Moutray
Chris Moutray

Reputation: 18349

In your example you're appending a label $label. Your example hints that before the line INSERT HTML HERE you have a span containing labels <span class="labels">...</span>. So perhaps just you need to append it to the list of existing labels in your html.

Your selector changes slightly to include .labels

$('#container .table-list .labels').append($label);

Alternatives to this include using .after(), .before() but others have already offered answers for these.

Personally I think you should introduce a container so you can explicitly append in the right place.

<span class="labels">...</span>
<div id="append-container"></div> <!--INSERT HTML HERE-->
<div class="div">–

$('#append-container').append($label);

Most UI frameworks that allow for view composition work by getting the developer to define regions/containers for were the sub-views/components should be added.

In any event unlike using solutions with .after() and .before() this will not break later on if you change the html such that the selectors for your after and before solution no long match. You have to update you selector to mirror the changes (assuming you remember to check the javascript - the next developer that comes along might not).

Upvotes: 0

Nalaka526
Nalaka526

Reputation: 11464

Try using Jquery .after, and change selector to locate last object before the position where you need to add the text (eg : .labels)

$('#container .table-list .labels').after('New Label Value');

JSFiddle

Upvotes: 2

Yograj Gupta
Yograj Gupta

Reputation: 9869

You can try this. Just get the .div which is after your inserted data, and insert content before this .div by using jquery .before. 

function addLabel($label) {
  $('#element1 .div').before($label);
}

by inserting content before the div, will insure that your inserted content always remain in order, in which you are inserting.

you can use jquery .after with .labels, but it will reverse content order, in which you are inserting.

Upvotes: 0

Related Questions